Category: html5

resize and crop image with canvas 0

How To Crop And Resize Images With Canvas

In this tutorial we’re going to figure out how to resize and crop a picture by using the HTML5 <canvas> element with some cool looking controls for resizing, normally found in image editing softwares....

svg image slider 0

How To Create SVG Image Slider

We are going to create an animated image slider by using SVG paths (for transition effects) to directly clip the slide images. The HTML Structure The HTML structure is comprised of an unordered list (ul.cd-slider), containing the...

responsive sidebar menu 0

How To Create A Responsive Sidebar Menu

Creating responsive navigations for huge websites has never been a simple task. In case you’re working on admin panel, odds are you’ll have to design and develop a vertical menu, with numerous sub-categories That’s the...

html 5 full screen 0

HTML5 Full-Screen API

The API permits a particular element to be viewed at full-screen. Dissimilar to pressing F11 to force your program to full-screen, the API is intended for pictures, videos and games running within a container....

meta-tags 0

5 Things You Can Do With HTML Meta Tag

Meta Tag is used to store a piece of information on a web page. Essentially, it is information about data. Its purpose is for browsers and search engines to understand and know the page...

Original Hover Effects 1

Css3 Hover Effect

Hover effect is a very important design element that is mostly used for styling and usability. Hover effect adds dynamics to the website and improves user experience instantly.  In this post, we’ve list some...

css3-accordion 0

Accordion With CSS3

Using hidden inputs and labels, we will create a CSS-only accordion that will animate the content areas on opening and closing. Today we’ll experiment some more with the adjacent and general sibling combinator and...

fancy-css3-transition-hover-effects 0

CSS3 Hover Transition Tutorial

In this tutorial I will be creating a decent looking hover over box that has a rotating transition effect when you hover over the image. As you may know CSS3 is not supported by...

slider-css3 1

Pure CSS3 HTML5 Image Slider

If we talk about Image Sliders, there are multiple times when you are confused and wondering as to which Image Slider to integrate in your website. Usually, people go on the Internet, search for...