Category: CSS3

A Look Into CSS Units: Pixels, EM, and Percentage

Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a number of methods of measurements used on the Web, specifically in CSS, namely Pixel, EM and Percentage. In this post, we are going to run through… Continue reading A Look Into CSS Units: Pixels, EM, and Percentage

Simplest Way to Create Cool CSS3 Animation Effects

CSS3 Animation are gaining tons of attention lately. Personally, I have started using it in some of my projects and I absolutely love how simple it is to create a smooth animation effect. One of the major advantages of CSS3 is – they’re hardware accelerated. It’s smoother and faster if compared with javascript generated animation.… Continue reading Simplest Way to Create Cool CSS3 Animation Effects

Create Pure CSS 3D Model With Tridiv

We all know about WebGL, it’s an open standard browser implementation of OpenGL, and you can create 3D games, effect with Javascript. Now, we have a new way to create 3D graphic – by using CSS. I found this very impressive tool called Tridiv, a web-based editor for creating 3D shapes in CSS. If you… Continue reading Create Pure CSS 3D Model With Tridiv

Sliding Horizontal Layout

Today we’d like to share an interesting layout with you. You might have seen it already on Skybox or on the website of Lotta Nieminen. It’s a layout where we see the main section in the middle and part of the previous and next section on the sides. The navigation reflects this view by showing… Continue reading Sliding Horizontal Layout

Detect Browser CSS Support With @supports Rule

Since browsers have their own decision of what features to include, we web developers frequently have to identify if the browser supports particular features, then we fill in the gap using Polyfills (if required). The popular way of handling this kind of situation is by using Modernizr but do you know that we can also… Continue reading Detect Browser CSS Support With @supports Rule

Build a Mini Image Gallery Slideshow using Galleria

After searching through countless blog posts I have been looking for a really great image gallery slideshow. Something that could be added into WordPress and made as an easy publishing solution. This lead me onto Galleria which is a beautiful open source responsive image slideshow using jQuery. In this tutorial I want to demonstrate how… Continue reading Build a Mini Image Gallery Slideshow using Galleria

Getting the Hang of CSS3 Columns

A while back CSS3 introduced a new set of properties, which are responsible for creating columns within your layout. You simple apply these to one of your elements in order to divide it up, automatically and hassle free, into a multi-column set up. This property is very easy to comprehend, set up and manipulate. There… Continue reading Getting the Hang of CSS3 Columns

27 Detailed Dropdown Menu Tutorials in CSS3 and HTML5

HTML5 and CSS3 have both revolutionised web design and we all see more powerful and functional websites using these two languages.HTML5 and CSS3 have many advantages like faster loading times,greater functionalities and more flexibility.You can apply to any website very easily. In today’s post we have gathered beautiful menu tutorials created using CSS3 and HTML5.The… Continue reading 27 Detailed Dropdown Menu Tutorials in CSS3 and HTML5

Foundation for Beginners: Custom Forms and Switches

Following on from our look at buttons in Zurb’s Foundation, let’s now take a look at custom forms and switches. During this tutorial we’re going to work on an exercise; a contact form which you can add to your projects or just play around with. Once we’ve built that, we’ll move onto other form elements.

20 Useful CSS Snippets Which Can Help You A Lot

CSS is extremely used when it comes to web development because it helps creating a lot of things with ease. Using CSS means that you will not only be able to create a great web site but it also means that you can optimize it very well. If you combine it with HTML5 and jQuery… Continue reading 20 Useful CSS Snippets Which Can Help You A Lot

Create An Animated CSS Box Menu

In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes, and when the mouse hovers over a box this will grow and shrink the other boxes. We can even add an icon to animate into… Continue reading Create An Animated CSS Box Menu

10 Useful Tools for Quick CSS Development

CSS development is a major part of web design; however, it takes a significant amount of time and effort for a web designer to develop CSS from scratch. The good thing is, there are some great tools out there which make this tedious task much simpler. These CSS Development tools will help you in simplifying… Continue reading 10 Useful Tools for Quick CSS Development

Create a Quick, Sticky Menu

  During this quick tutorial we’re going to implement a sticky menu with CSS, toggling its visibility with jQuery. It’s the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings. Step 1: Setting up the Page Let’s start out by making a basic HTML page. We’ll… Continue reading Create a Quick, Sticky Menu

Simple YouTube Menu Effect

Today we’ll show you how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”). The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is… Continue reading Simple YouTube Menu Effect

The Best Way to Learn CSS

CSS works hand in hand with HTML; HTML sorts out the page structure, CSS makes it look pretty and adds subtle levels of interaction. As a web designer you should really get to grips with both these languages. Even if you don’t do the coding yourself, understanding how they work will help you design for… Continue reading The Best Way to Learn CSS

CSS Media Query Snippets

With responsive design being big in web design it’s important that you design your website so that it can be used on different devices. There are a number of different media queries that you can use on your design, if you don’t know where to start with media queries here is a good boilerplate to… Continue reading CSS Media Query Snippets

How to Create Bounce Effect with CSS3 Animation

This article is part of our “HTML5/CSS3 Tutorials series” – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series. Today, we are going to doing an experiment with CSS3 Animation. In our previous post, we discussed how to re-create “marquee” effect using CSS3 Animation.… Continue reading How to Create Bounce Effect with CSS3 Animation

CSS: Responsive Navigation Menu

Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I’ve discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked… Continue reading CSS: Responsive Navigation Menu

Building Icons With a Single HTML Element

With the arrival of ultra high definition screens (think Retina) new design challenges have arisen; we need to find ways to accomodate all devices. Take displaying icons for example. We could lean on serving images at 200%,or using SVG,but it’s also possible to build a surprising amount of graphics with CSS alone. Let’s build an… Continue reading Building Icons With a Single HTML Element