Today's Etc Tutorial is a matte white square check mark icon. We will also be creating the accompanying background image. The check mark is a standard Photoshop shape.

In this Etc Tutorial we will be creating a 3d transparent glass text effect. The glass effect is achieved with layer styles so it can be easily applied to any font or Photoshop shape.

In this Etc Tutorial we will be creating a grungy rusted carbon fiber text effect. We will also be creating the accompanying rusted metal background effect seen in the preview.

In this Etc Tutorial we will be creating a brushed silver reflective text effect. We will also be creating the accompanying abstract reflective watery background scene.

Today's Etc Tutorial is a crystal clear bubble icon. We will also be creating the accompanying background image. The check mark is a standard Photoshop shape.

Here we're going to show you how to create the Coming Soon/Under Construction PSD template seen below designed to match the Slate Grey variation of our Awake Wordpress Theme.

In this tutorial, we'll show you how to add column shortcodes to your Wordpress theme. In the end, we also cover how to convert this into a column-layouts plugin.

Today's Etc Tutorial is a yellow road sign icon. We will be using a standard down arrow Photoshop shape to create the image inside of the road sign icon.

Today's Etc Tutorial is a glossy black button icon. We will also be creating the accompanying spot light background effect. The check mark is a standard Photoshop shape.

Today's Etc Tutorial is a red and white pearl icon. We will be using a standard down arrow Photoshop shape to create the image inside of the white pearl icon.

The following tutorial explains how to add versatile button shortcodes with size, alignment, target, and variation attributes to your Wordpress theme. It then explains how to convert it into a plugin.

In this tutorial we will create a simple elegant intertwining pattern - the basic knitting one. We’ll make it as a repetitive seamless pattern and save it as a pattern swatch in Illustrator. Don’t hesitate to download the .ai source file. Step 1 Open Adobe Illustrator, create a new file and with a pen tool (P) make a simple S-shaped path as in the image below. Give it a 5px stroke. Select it (V) and go to Effect > Distort & Transform > Transform… panel. Type 1 copies, check "Reflect X" and choose the top right corner as the transform origin. Step 2 The rectangle that contains my S-shaped path is 20px x 50px so a single "loop" is 40px wide. Go again to Effect > Distort & Transform > Transform… panel and add another transform : create a copy that is shifted 40px to the right. Step 3 One again go to the Transform panel, this time we’ll move the "loops" down of about 60% of their height (here 31px). Step 4 Go to the Object menu and click Expand Appearance. Go again to the Object menu and now click Expand, making sure that "Stroke" is checked in the pop-up window. Step 5 If you go the Layers panel now, you’ll find there a group (4 "loops") composed of two subgroups (2 "loops" each) composed of 2 subgroups of a single "loop" each. Select the first level subgroup (2 "loops") and click on "Unite" in Pathfinder panel. Repeat for the second subgroup. Step 6 Select all and Go to Object > Path > Offset Path… set the value of path offset to 1 - 1,5px. Change the fill color of your new forms so that they are easily visible. Step 7 Select all and click on Divide in your Pathfinder panel. Ungroup all - Shift+Cmd/Ctrl+G (or go to Object > Ungroup). Step 8 Select the parts of the "loops" as in the image below and change their color to the one you applied to the offset path. Then select the parts of the offset path as in the image and change their color to the color of the loop. Step 9 Select a part of the loop and go to the Select menu. Choose Select > Same > Fill Color, then click on Unite in the Pathfinder panel. Then select a part of the offset path, again to Select > Same > Fill Color and delete the selection. Go to Pbject > Path > Clean Up to delete all Stray Points and Unpainted path that have been created while dividing the objects. Step 10 Create a rectangle 40px x 31px (dimensions correspond to the parameters of the transforms we’ve applied). Send it to back Shift+Cmd/Ctrl+[ (Object > Arrange > Send to back). Give it no stroke and no fill. Place your rectangle below the loops in the area where we created the intertwining effect (as in the image). Step 11 We’re almost done, select all and drag to the swatches panel. Alternatively, go to Edit > Define Pattern .. Your new repetitive pattern appears now in the swatches panel. And that’s it. Now it’s your turn to go further and experiment with intertwining patterns. I’m looking forward to your comments. If you enjoyed this tutorial, please share and bookmark. Thanks.

In this tutorial we will try to recreate the scrolling effect you’ve seen on the new e-bay site. We’ll create a simple responsive one-page site presenting the beauty and benefits of lavender. No javascript needed - we will use only css. Step 1 - Prerequisities We will need 3 background images, that will stretch to full page width. Mine are about 1800px x 1200px. Step 2 - Html The markup is simple. The content of each part is wrapped in a div with a class "wrapper" which is contained within a section or the header (for the introductory part). <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper"> <h1>From love for lavender</h1> <p><span>Lavender</span> (botanic name Lavandula) is a .... </p> </div> </header> <section class="content" id="oil"> <div class="wrapper"> <p><span>Lavender oil</span> is an ... </p> </div> </section> ... <footer> <div class=wrapper> "From love for lavender" has been built ... </div> </footer> </body> </html> Step 3 - basic css The wrapper class is defined as follows. The box-sizing property allows to alter the default CSS box model, i.e. content-box model, where the width and height properties are measured including only the content. If we set box-sizing to border box, the width and height include the padding and border. .wrapper { width: 100%; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Since we want each section and the header to behave responsively, we’ll use only percent units. For example : the background image for the first section in 500px width, which represents 500px/1200px x 100% = 41.66667% #oil .wrapper { background: url(../images/lavender2.jpg) 4.16667% center no-repeat; padding: 10% 4.16667% 10% 50%; background-size: 41.66667% auto;} The value of 4.16667% corresponds to 50px when the wrapper has its maximum width. We’ll treat the case of larger monitors with a media query : @media only screen and (min-width: 1200px) { .wrapper { width:1200px; } ........ #oil .wrapper { padding: 120px 50px 120px 600px; } You’ll find the complete stylesheet in the download files. Step 4 - the scrolling effect We don’t use any Javascript, our scrolling effect is obtained purely with css. We don’t want any additional markup, so we will use the :after pseudo-elements. They’ll be positioned below each section and covered with the background image. We will set the background-attachment property to fixed. We’ll also add sole inner shadow to give the illusion of depth : section:after, header:after { content: ""; display: block; height: 400px; width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); } We just have to assign the background image to each section header:after { background-image: url(../images/lavenderbg1.jpg); } #oil:after { background-image: url(../images/lavenderbg2.jpg); } #culinary:after { background-image: url(../images/lavenderbg3.jpg); } #dried:after { background-image: url(../images/lavenderbg4.jpg); } Step 5 - last tweaks Since background-attachment:fixed is not supported in mobile Safari we’ll add the following media-query @media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (min-device-width: 320px) and (max-device-width: 480px) { section:after, header:after { background-attachment: scroll; } } We will also scale down the font-size for smaller monitors @media only screen and (max-width: 600px) { body { font-size: .75em; } } And that’s it! I hope you’ll find this technique useful, don’t hesitate to go further - this tutorial is just an inspiration. Looking forward to your comments. Thanks. Terms of use : You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

In this tutorial we will use css3 3D transforms to create a contact form that mimic a regular letter. You’ll have to flip the envelope, note your (sender’s) coordinates on its back lid, open the envelope, unfold the paper and write your message. We’ll also make use of the :target pseudo-class so that no javascript is necessary. Note that to enjoy the 3D behavior of this contact form, your browser has to support css3 3D transforms, check the current state of the support at "can I use." Step 1 - Prerequisities If we want that our letter reaches its destination, we need a stamp. We’ll also use a subtle paper pattern for the as the envelope background. As far scripts we’ll need the modernizr library to detect the browser’s support for the 3D css transforms. To keep this tutorial concise, we won’t include all styling but only what is essential for the 3D behavior. For the same reason we will omit vendor prefixes. You’ll find the complete stylesheet in the download file. Step 2 - 3D transforms - getting ready We have three "flips". We flip the envelope (horizontally with the origin in the center), than we open it (we flip the lid), then we unfold (=flip) the bottom part of the letter (the two latters - vertically with the origin on the top). In each case the basic markup would be something like that : <div class="container"> <div class="flip"> <div class="front">...</div> <div class="back">...</div> </div> </div> We use the .container to activate the 3D space, i.e. set the perspective : .container { width: ...; height: ...; position: relative; /* or absolute */ perspective: 1000px; } The .flip div wraps the 3d object and the .front and .back represent its two faces. The .flip must have the transform style set to preserve-3d so that its children are positioned in the 3D-space and not flattened in the plane of the element. .container .flip { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; } The .back and .front elements have backface-visibility:hidden to hide their back faces. Finally, we flip the .back element : .container .flip > div { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .container .flip .back { transform:rotateY(180deg); } Step 3 - our markup We use 3 times the basic pattern introduced in the previous step : <section class="container" id="contact"> <form class="flip"> <div class="front"> <h2>Contact info</h2> ... <a id="flip2back" href="#">Drop me a line !</a> </div> <div id="content" class="back"> <div id="letter"> <div class="container"> <div class="flip"> <div class="front"></div> <div class="back"> You'd like us to ... <a id="close" href="#">Close</a> </div> </div> </div> <textarea ... ></textarea> <input type="submit" class="submit" value="Send" /> </div> <div class="top"> <a id="flip" href="#contact">Flip</a> </div> <div id="envelope" class="container" > <div class="flip"> <div class="front"> <div> <label for="name">Your name :</label> <input type="text" id="name" name="name"> </div> ... <a id="open" href="#content">Open</a> </div> </div> </div> </div> </form> </section> We will add the :target pseudo class to three elements : #front, #content, #message - there are four links that will switch the anchors : "Drop me a line", "0pen", "Close" and "Flip". Step 4 - Flipping the whole envelope. We proceed as in Step 2. The difference is that .flip is initially transformed (rotateY(180deg)). section.container { position: relative; width: 600px; height: 300px; margin: 280px auto 0; perspective: 1000px; } section.container > form.flip { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transform-origin: center center; transform: rotateY(180deg); transition: transform 0.7s 0s; } section.container > form.flip > div { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } section.container > form.flip > .back { transform: rotateY(180deg); } section.container:target > form.flip { transform: rotateY(0deg); } Step 5 - We open the envelope This part is a bit tricky because we will also have to change the stack of elements. When the envelope is fully opened we want the lid to be under the letter, see the image below : Fortunately, z-index is an animatable css property which means that we can set the delay between the switch of its values. /* when "Close" is clicked : #the letter waits 0.5s and slides down into the envelope, the #lid waits 1s to become the top layer and to flip */ .container#lid { position: relative; width: 100%; height: 50%; perspective: 800px; z-index: 2; transition: z-index 0s 1s; } #lid .flip { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 0.5s 1s; transform-origin: left top; } #letter { position: absolute; width: 90%; height: 95%; left: 5%; top: 5%; z-index: 0; transition: top 0.5s 0.5s; } /* when "Open" is clicked the #lid starts to flip immediately, once it's flipped (i.e. after 0.5s) it becomes the bottom layer and the #letter start to slide out from the envelope */ #content:target .container#lid { z-index: -1; transition: z-index 0s .5s; } #content:target #lid .flip { transform: rotateX(180deg); transition: transform 0.5s 0s;} #content:target #letter { top: -40%; } #lid .flip > div { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } #lid .flip > .back { transform: rotateX(180deg); } #top { position: absolute; left: 0; bottom: 0; width: 100%; height: 65%; z-index: 1; } Step 6 Unfold and fold the letter Here, again we will delay the z-index change. #letter .container { position: absolute; width: 100%; height: 50%; top: 0; left: 0; webkit-perspective: 800px; transition: 0s 0s; z-index: 1; } #letter .flip { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 0.5s 0s; transform-origin: left top; } #letter .flip > div { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } #letter .flip > .back { transform: rotateX(180deg); } #content:target #letter .flip { transform: rotateX(180deg); transition-delay: 1s; } #content:target #letter .container { z-index: -1; transition: z-index 0s 1.5s; } I put a slightly simplified version of this contact form on dabblet so that you could easily experiment with the code. Make sure your browser supports 3D transforms. Step 7 Other browsers What about browsers that do not support 3D transform? We’ll detect the lack of support thanks to Modernizr and add some tweaking styling. We will hide (with display:none) all back-faces of our flipping elements. We’ll also remove all z-index transitions. .no-csstransforms3d section.container:target > form.flip > .back, .no-csstransforms3d #content:target #letter .flip .front, .no-csstransforms3d .container#lid .back { display: none; } .no-csstransforms3d .container#lid, .no-csstransforms3d #content:target .container#lid { -webkit-transition: none; } .no-csstransforms3d #content:target .container#lid .back { display: block; top: -150px; } .no-csstransforms3d #content:target #letter .flip .back { top: -140px; } In case of IE8 we have another problem - the :target pseudo class is not supported. One option is to add some javascript to deal with click events. We could also modify the stylesheet so that no clicking was necessary. I hope you enjoyed this tutorial and got inspired. Looking forward to your comments. Thanks ! Terms of use : You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

In this tutorial we’ll create a simple responsive home page with a header embellished with a carousel where photos slide from right to left. Our solution will not require javascript, we’ll make our slideshow using css3 animations - supported by all major browsers: Firefow 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ and IE10. Step 1 - Prerequisities We will need 4 large photos, mine are 1200px x 390px. To have a horizontal slider I’ll create a 4800px x 390px image in Photoshop, place my four images one after another in a row and save the image for the web ("slider-horizontal.jpg"). Step 2 - HTML In fact we will animate the background-position of our header element. The header has a very simple markup : <header> <h1>L'ile de Batz</h1> </header> The complete html is as follows. <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="stylesheets/screen.css" media="screen" title="no title"> </head> <body> <header> <h1>L'ile de Batz</h1> </header> <blockquote> Maecenas faucibus .... </blockquote> <div class="content"> <section class="main"> <h2>Once upon a time…</h2> <p>Aenean lacinia bibendum ...</p> <p>...</p> <p>...</p> <p>...</p> </section> <section class="links"> <h2>Links to learn by heart..</h2> <ul> <li><a href="http://www.iledebatz.com" target="_blank">Bar & restaurants</a></li> ... </ul> </section> </div> <footer> <p class="copyright">..</p> </footer> </body> </html> Step 3 The "mobile-first" basic css We will not start with the large screen styles. We’ll follow the mobile-first approach : at first we will define the baseline shared styles and we will add more advanced layout styles destined for larger screens later. Here are the basic styles, you’ll find the complete stylesheet in the "download" files. body { width: 90%; min-width: 300px; max-width: 1200px; margin: 0 auto; padding-top: 1em; color: #504331 } header { text-align: center; position: relative; } h1 { font-size: 2.75em; background: white; display: inline-block; padding: 0 10px; margin-bottom: .25em; } h1:after { content: ""; height: 2px; display: block; position: absolute; left: 0; right: 0; top: .5em; z-index: -1; border-top: 1px solid #504331; border-bottom: 1px solid #504331; } .links { background: url(../images/map.png) bottom center no-repeat; padding-bottom: 177px; } Step 4 Large screen styles On large screens we want the .main and .screen sections to be displayed differently. We want the .link section to be 300px wide and positioned as a right sidebar and the .main section to take the remaining space on the left. We will also add a double line separating the sections. We detect the screen width above 1024px with a simple @media query : @media only screen and (min-width: 1024px) { .content { position: relative; } .main { margin-right: 320px; padding: .5em 20px .5em 0; /*add a double line */ border-right: 1px solid #504331; box-shadow: 2px 0 white, 3px 0 #504331; } .links { position: absolute; right: 0; top: 0; width: 300px; text-align: right; } } Step 5 Responsive image in the header Let’s start to deal with the main part of this tutorial : a responsive css-only slider in our header. First, we will assure that the background image is responsive. header { background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32.5%; } With two values in percentage units : 400% for background-size and 32.5% of bottom padding the header background will display properly no matter the window size. Why 400% ? We have four slides so we want to display 1/4 of the background image in our header "window", that means that the background size has to be four time wider than the width of the header. Why 32.5% ? We position our background in the bottom of the header. The height of the background image is 390px, the width of the single slide is 1200px, 390/1200 = 0.325 so the height is 32.5% of the width. Step 6 Animation The property that will be animated is background-position. First note that the second image is displayed when background-position is set to 33.33333% bottom, the third - 66.66667% bottom and the fourth - 100% bottom. The first one is displayed when background-position is 0 bottom or 133.33333% bottom (we set repeat to repeat-x). Each image has its 25% percent of time "of glory". The first is displayed from 0 to 25%, the second from 25% to 50%, the third from 50% to 75% and the last one from 75% to 100%. Still, we want to see the transition so each image starts to slide off slightly (here 5%) before the end of its 25% of time. Let’s see the @keyframes : @keyframes h_slide { 0% { background-position: 0% bottom; } 20% { background-position: 0% bottom; } 25% { background-position: 33.33333% bottom; } 45% { background-position: 33.33333% bottom; } 50% { background-position: 66.66667% bottom; } 70% { background-position: 66.66667% bottom; } 75% { background-position: 100% bottom; } 95% { background-position: 100% bottom; } 100% { background-position: 133.33% bottom; } } Note that you will need to add the vendor-prefixes version @-webkit-keyframes (for Chrome, Safari, iOS Safari, Android browsers) and @-moz-keyframes (for Firefox 15). The complete header style is as below. Our animation "h_slide" repeats infinitely every 24s (6s for each slide). The timing-function is set to ease-out so that each slide slows down at the end of its transition. header { text-align: center; position: relative; background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32.5%; -webkit-animation: h_slide 24s ease-out infinite; -moz-animation: h_slide 24s ease-out infinite; animation: h_slide 24s ease-out infinite; } Conclusions That’s all - thank you. Given that css3 animations are now supported by all major browsers and that adaptive layout becomes a "must", I hope that you’ll find useful the techniques presented in this tutorial. Get inspired. Terms of use : You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

I have a weakness for scrolling effects, I haven’t got fed up with parallax and I don’t mind scrolling up and down and from right to left and see what happens. Recently I got impressed by the James Bond 007 Cars Evolution by Evans Halshaw. Don’t miss it if you haven’t already seen it on your desktop (the mobile experience is not the same). James Bond 007 Cars site uses a very nice plugin skrollr.js by Prinzhorn. In this tutorial I’ll use this plugin to create a funny Christmas card, I take a risk to make a very "seasonal" tutorial (it’s snowing outside). Easily, you can adapt the same techniques for your purpose. This tutorial doesn’t cover all possibilities of skrollr - I just want to show you how easily you can add scrolling effect to your site, without even touching javascript. You’ll find much more in Prinzhorn’s repository on Github. Step 1 Prerequisites In this example I use 6 background images, two of them being repetitive patterns and a transparent .png with snow flakes that I’ll use for a subtle animation. I also created a simple .svg containing two paths (left and right part of a simple ribbon bow). I drew my paths in Illustrator, saved as SVG and copied the SVG code. But, if you don’t feel like using SVG here - skip this part. Step 2 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Merry Christmas - Merry Scroll</title> <link rel="stylesheet" href="stylesheets/screen.css" media="screen" title="no title"> </head> <body> <div id="skrollr-body"> <div id="wish1" class="centered"></div> <div id="wish2" class="centered"> <div id="snow" class="centered"></div> </div> <div id="ribbon-left" class="ribbon"></div> <div id="ribbon-right" class="ribbon"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="337px" height="200px" > <path ... /> <path ... /> </svg> <div id="pattern1" class="centered"></div> <div id="pattern2" class="centered"></div> <div id="wish3" class="centered"></div> </div> <script src="javascripts/skrollr.js"></script> <script type="text/javascript"> window.onload = function() { skrollr.init({ forceHeight: false }); } </script> </body> </html> Step 3 CSS You’ll find some explanation in the comments below. Note that we set z-index to the divs in the order that they will be visible. /*---reset-----*/ html, body {padding:0;margin:0;} /*---we need enough height for scrolling----*/ body {overflow:auto; height:7600px; } /*---all will happen in the fixed window-----*/ #skrollr-body {width:100%; height:100%; position:fixed; } #skrollr-body div {overflow:hidden; position:absolute; } /*---to center horizontally and vertically the elements that have position: absolute----*/ .centered { top:0; bottom:0; left:0; right:0; margin:auto; } #wish1 {background: #E7685D url('../images/merry1.png') center center no-repeat ; z-index:5;} /*---box shadows create two green vertical lines that will merge into a 40px ribbon (see Step 6) -----*/ #wish2 {background: #94C3B6 url('../images/merry2.jpg') center bottom no-repeat ; z-index:4; box-shadow: 0 0 0 20px #49675f;} /*---snow.png contains the snow flakes on a transparent background (see Step 6) -----*/ #snow {width:363px; background:url('../images/snow.png') no-repeat} #pattern1 { background:url('../images/snow-flakes.png') ; z-index:2; background-attachment:fixed} .ribbon {background:#49675f; height:40px; top:50%; margin-top:-20px; z-index:3;} #ribbon-left {left:0} #ribbon-right {right:0} /*----center where the #ribbon-left and #ribbon-right cross----*/ svg {position:absolute; z-index:5; left:50%; top:50%; margin-left:-170px; margin-top:-180px} #pattern2 { background:url('../images/pattern.png'); z-index:1;} #wish3 {background:#8DBAAE url('../images/merry3.png') no-repeat center center; z-index:6; border-radius:50%;} Step 4 Using skrollr.js With skrollr.js you animate the CSS properties of an element depending on the horizontal scrollbar position. You use the HTML5 "data-" attributes to define a set of styles (a keyframe). In this tutorial we will limit ourselves to the absolute (document) mode where "the keyframes are defined as absolute values describing how much the document has been scrolled down", ex. <div id="wish1" class="centered" data-0="width:100%;" data-1000="width:0%;"></div> Step 5 Screen 1 When the browser scrollbar is at the zero position, we see the #wish1 that covers the 100% height and 100% width of the window. When we start to scroll down, the width decreases and attains 0%, once the scroll position is 1000px. The element #wish1 is then no longer visible and we can see the #wish2 which is positioned identically but has a smaller value of z-index. <div id="wish1" class="centered" data-0="width:100%;" data-1000="width:0%;"></div> Step 6 Screen 2 We’ve got 2 effects on this "screen". Just like in the previous step the width decreases from 100% to 0% when we scroll down from 1000px to 2000px. The difference is that the #wish2 does not disappear completely, we can see its box-shadow that form a vertical ribbon. We will also animate the snow flakes. When we scroll down, the top position of #snow changes. Note, that we could also animate its background-position. <div id="wish2" class="centered" data-1000="width:100%;" data-2000="width:0%;"> <div id="snow" class="centered" data-1000="top:0px;" data-2000="top:100px"></div> </div> Step 7 Screen 3 - The Ribbon There are three more elements that create the crossing ribbons, the #ribbon-left and #ribbon-right and the SVG element that "draws" the simple ribbon bow. As we scroll down the width of the horizontal ribbons changes from 0% to 50% - they meet in the middle of the screen. <div id="ribbon-left" class="ribbon" data-1500="width:0%;" data-2500="width:50%;"/> <div id="ribbon-right" class="ribbon" data-1500="width:0%;" data-2500="width:50%;"/> Now, let’s have a look at the ribbon bow. To animate the svg path we will play with the SVG attributes: stroke-dasharray and stroke-dashoffset (here, Prinzhorn gives you’ll find another example of this technique). We set stroke-dasharray to 500px which means that we draw our path with a dashed line with the dashes and gaps 500px long, and we set the offset of where the dash starts to 500px. With these setting the path is not visible at all. As we scroll down, we start to decrease the offset and the path is appearing gradually. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="337px" height="200px"> <path style="fill:none; stroke:#49675f; stroke-width:40px; stroke-dasharray:500px; stroke-dashoffset:0;" data-2500="stroke-dashoffset:500;" data-4000="stroke-dashoffset:0;" d="M169,174C123,169-17.5,87.5,36,34S169,174,169,174z"/> <path style="fill:none; stroke:#49675f; stroke-width:40px; stroke-dasharray:500px; stroke-dashoffset:0;" data-2500="stroke-dashoffset:500;" data-4000="stroke-dashoffset:0;" d=" M169,174c46-5,186.5-86.5,133-140S169,174,169,174z"/> </svg> Step 8 Patterns What happens here ? We scroll down and the the height of the #pattern1 with a snow-flake pattern (you may download the pattern here, btw) decreases. We start to see the #pattern2 covered with a simple striped pattern which is below (has a smallest z-index). <div id="pattern1" class="centered" data-2500=" height:100%; "data-3500="height:0%;"></div> <div id="pattern2" class="centered"></div> Step 9 And a Happy Year Here what happens on the last "screen" : <div id="wish3" class="centered" data-4000="width:0px;height:0px; "data-6000="width:700px;height:700px;"></div> What about mobile and tablets ? Position:fixed does not work well on mobile devices so we need to provide an alternative solution for the mobile screens. We detect mobile browsers and tablets and redirect their users to the mobile version of the page. For the purpose of this tutorial my mobile page is very very basic, but you can go much further, especially that there exists a mobile oriented version of the skrollr plugin. Get inspired and Merry Christmas… .. and a Happy New Year. Terms of use : You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

We got used to standard grids and clear horizontal and vertical axes. No wonder that the eye-catching layouts based on the diagonal lines have become one of the recent trends in web design. In this tutorial we will create a very simple diagonal thumbnails gallery. We will use css3 2D-transforms and pseudo elements to display the diamond-shaped elements with a background image. Note that to keep the code below concise I omit the vendor prefixes before "transform" and "transform-origin". Step 1 Prerequisites To recreate the demo gallery you will need 6 images (mine are 250px x 250px) stuck together into one sprite (mine is 1500px x 250px and you can see it right below). Step 2 A single diamond Here is the markup for a single diamond thumbnail. I use two classes : ".diamond" to rotate an element and ".thumb" to add some background image (note that the middle square has no background image, it has only the ".diamond" class, see the demo). <a class="diamond thumb" id="cake" href=""> <p>A cherry</p> </a> Step 3 Rotate a square Let’s start writing some css. Why 178px? The diagonal of our square is 250px (the dimension of an image), so the side must have 250px divided by a square root of 2 (have this "back to school" feeling ?). .diamond { display: block; width: 178px; height: 178px; background: #5c3e52; transform: rotate(45deg); } .thumb { background: url(../images/sprite.jpg); position: relative; overflow: hidden; } .image p {visibility:hidden} Step 4 Rotate the background image We rotated the square but its background image got rotated as well, and this is not a desired effect. We’ll "fix" it using an :after pseudo-element. .thumb:after { content: ""; position: absolute; top: -36px; left: -36px; width: 250px; height: 250px; background: inherit; transform: rotate(-45deg); } In the image above you can see how our .thumb:after is positioned. It inherits the background of its parent and its parent has overflow set to hidden so we’ll see exactly the parent’s diamond shape. The rotation we applied has the opposite sign, so it reduces to 0 and we see an unrotated background image. Step 5 The gallery I used floats to create my small gallery of thumbnails but you can also position your thumbnails absolutely. The html is as follows : <div class="wrap"> <h1>Small pleasures make my day...</h1> <a class="diamond thumb intend" id="cake" href=""><p>A cherry</p></a> <a class="diamond thumb dark" id="chair" href=""><p>An espresso</p></a> <a class="diamond thumb break" id="library" href=""><p>A book</p></a> <a class="diamond" href=""><p>Pleasures</p></a> <a class="diamond thumb dark " id="dream" href=""><p>A dream</p></a> <a class="diamond thumb intend" id="roses" href=""><p>A rose</p></a> <a class="diamond thumb dark" id="wine" href=""><p>Cheers !</p></a> </div> We have to add some css so that the diamonds stick nicely one to another .diamond { float: left; margin-left: 72px; /* 250-178 */ margin-top: -53px; /* 250/2-178 */ } .break { clear: left; margin-left: 36px; /* (250-178)/2 */ } .intend { clear: left; margin-left: 161px; /* (250-178)/2 + 250/2 */ } Step 6 "Cheers !" and others We want our descriptions to be displayed on a one-color background on mouse hover. First note that, since our .diamond is rotated so is the paragraph contained within. We’ll have to re-rotate it with an opposite sign. .diamond p { position: relative; transform-origin: top left; transform: rotate(-45deg) translate(-89px, 0); line-height: 250px; z-index: 1; pointer-events: none } Step 7 On mouse hover Here is what happens on mouse hover .diamond:hover p { visibility: visible; } .thumb:hover { background: #a5b8a6; } .thumb.dark:hover { background: #bda3c1; } .thumb:hover:after { box-shadow: inset 0 0 100px #5c705d; } .thumb.dark:hover:after { box-shadow: inset 0 0 100px #5c3e52; } Step 8 The lack of support We have to assure a descent display in browsers that do not support css3 transforms. We’ll use modernizr to detect the lack of support and add .no-csstransforms .diamond { margin-left: 0; margin-top: 0; } .no-csstransforms .intend { margin-left: 197px; } .no-csstransforms .break { margin-left: 108px; } .no-csstransforms .diamond p { line-height: 178px; } Step 9 See you soon ! That’s all for today, thanks :) Are you ready for hexagonal shapes ? Stay tuned, we’ll write about it ! Step 10 A little update Thanks to everyone who reported a bug - the hover effect didn’t work quite correctly. To fix it we need to add "pointer-events : none " to the paragraphs, i.e. .diamond p { pointer-events: none } : .diamonds p (see Step 6). Terms of use : You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

This time let’s get inspired by the sliding menu effect, also known as the Lavalamp effect (ex. here). We’ll recreate it with pure css - using css3 transitions and the general sibling combinator selector. Below we’ll discuss three simple examples (make sure to see the demo first). Step 1 - Prerequisites We use a Unica One google web font. In the "heart & arrow" example we use three images combined into a sprite image as below : Step 2 - HTML For each of the three examples the html is the same. We’ll just switch the ph-line-nav class name to ph-dot-nav and ph-heart-nav. <div class="nav ph-line-nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> <div class="effect"></div> </div> The general sibling selector uses a tilde character combinator (E ~ F) and matches elements that are siblings of a given element. The elements don’t have to be adjacent siblings but the first element (E) has to occur before the second (F) one. They also have to share the same parent. That’s why in the markup below the <a> elements and the div.effect are nested together within a div.nav. Step 3 - CSS - all examples Let’s start with the styles that are common for all three examples. The parent element div.nav is positioned relatively. The <a> elements are adjacent floats. (Note that we omit the vendor prefixes for the sake of simplicity). .nav { overflow: hidden; position: relative; width: 480px; } .nav a { display: block; position: relative; float: left; padding: 1em 0 2em; width: 25%; text-decoration: none; color: #393939; transition: .7s; } .nav a:hover { color: #c6342e; } The crucial part of the lavalamp-like effect happens here : .effect { position: absolute; left: -12.5%; transition: 0.7s ease-in-out; } .nav a:nth-child(1):hover ~ .effect { left: 12.5%; /* the middle of the first <a> */} .nav a:nth-child(2):hover ~ .effect { left: 37.5%; /* the middle of the second <a> */ } .nav a:nth-child(3):hover ~ .effect { left: 62.5%; /* the middle of the third <a> */} .nav a:nth-child(4):hover ~ .effect { left: 87.5%; /* the middle of the forth <a> */} When the mouse is over one of the < a > elements, the div.effect moves smoothly toward its middle. Don’t hesitate to experiment with the transition-timing-function (ex. here). Here we use the "ease-in-out" function so that the transition starts and end slow. Step 4 - Into the details (1) Let’s start with the easiest example, the one with a floating line. You just have to define the dimensions and colors of the line and position it vertically. .ph-line-nav .effect { width: 90px; height: 2px; bottom: 36px; background: #c6342e; box-shadow: 0 1px 0 white; margin-left:-45px; } In each case we will set the margin-left equal to the half the length of the element so that it is always centered with the hovered link, see the image below : Step 5 - Into the details (2) Now, let’s discuss the effect with the dot. We add a horizontal 1px height line to the div.nav. To do so we make use of the :after pseudo-element. We also add little dots, positioned on the line below each menu item, again we use :after pesudo-elements. The div.effect is now a 10px circle and its properties are analogous to those from the previous example. .ph-dot-nav:after { content: ""; display: block; position: absolute; width: 100%; height: 1px; background: #c6342e; bottom: 40px; } .ph-dot-nav a:after { content: ""; position: absolute; width: 4px; height: 4px; bottom: 38px; left: 50%; margin-left: -2px; background: #c6342e; border-radius: 100%; } .ph-dot-nav .effect { width: 10px; height: 10px; bottom: 36px; margin-left: -5px; background: #c6342e; border-radius: 100%; } Step 6 - Into the details (3) Finally, let’s have a look at the heart-and-arrow example. The heart is composed of two elements, added as :before (the left half of the heart) and :after (the right one) pseudo-elements. The a:after has z-index set to 1 so that it is positioned above the arrow - that makes the trick works :) .ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before { background: url('../images/heart.png') no-repeat; } .ph-heart-nav .effect { position: absolute; bottom: 26px; background-position: 0 0; height: 8px; width: 62px; margin-left:-31px; } .ph-heart-nav a:before, .ph-heart-nav a:after { content: ""; display: block; position: absolute; left: 50%; bottom: 20px; background-position: -62px 0; height: 20px; width: 11px; margin-left: -11px; } .ph-heart-nav a:after { z-index: 1; background-position: -73px 0; } Thats all - I hope you enjoyed this tutorial and got inspired. Looking forward to your comments. Thanks. Terms of use : You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

In this tutorial we will play a bit with icon fonts. Besides other advantages, this technique provides an easy way to have your icons look crisp on retina displays. We’ll use a custom set of social icons generated with IcoMoon App and we will add a fancy effect on hover. Step 1 Quick Visit to IcoMoon App For the purpose of this tutorial we select 6 social networks icons : dribbble, facebook, twitter, pinterest, tumblr, flickr, google plus and github. What follows is as easy as clicking "Font" and "Download". Our custom font icons set is ready to use. The IcoMoon download folder contains a style.css file that will use as a base. Here’s what we’ll start with: @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } .icon-dribbble:before, .icon-twitter:before, .... { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; } .icon-dribbble:before { content: "e00a"; } .icon-twitter:before { content: "e00b"; } .... Step 2 HTML Let’s look at the markup <ul class="social"> <li><a href="#" aria-hidden="true" class="icon-dribbble"></a></li> <li><a href="#" aria-hidden="true" class="icon-twitter"></a></li> <li><a href="#" aria-hidden="true" class="icon-facebook"></a></li> <li><a href="#" aria-hidden="true" class="icon-pinterest"></a></li> <li><a href="#" aria-hidden="true" class="icon-flickr"></a></li> <li><a href="#" aria-hidden="true" class="icon-google-plus"></a></li> <li><a href="#" aria-hidden="true" class="icon-tumblr"></a></li> <li><a href="#" aria-hidden="true" class="icon-github"></a></li> </ul> The aria-hidden state indicates whether an element is visible or not, we use it to tell the screen reader that an element is not visible to assistive technology. Step 3 Hover Effect - the idea The idea is to create a kind of a movement effect on hover. We’ll have the "li" elements with overflow set to hidden, and the "a" elements being twice as high. With the a:after pseudo-elements we duplicate the icon. What happens on hover is : "li" changes its background color, the "a" element shifts up half its height (see the image below). Both changes with a subtle transition. Step 4 Additional Font Icons styles What we have to do is to duplicate the icon-*:before styles for icon-*:after : .icon-dribbble:before, .icon-twitter:before, ..., .icon-github:before, .icon-dribbble:after, .icon-twitter:after, ..., .icon-github:after { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; } .icon-dribbble:before, .icon-dribbble:after { content: "e00a"; } .icon-twitter:before, .icon-twitter:after { content: "e00b"; } ... Step 5 CSS continued Note that, for the simplicity, I don’t use the vendor prefixes for transition. ul.social { text-align: center; } ul.social li { display: inline-block; width: 60px; height: 60px; overflow: hidden; line-height: 60px; background: #404040; /* --- optional, it looks nice also with simple squares --- */ border-radius: 100%; transition-duration: 0.7s; } /* --- hover effect : background color change --- */ ul.social li:hover { background: #33cc99; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); } ul.social li a { display: block; width: 100%; height: 200%; position: relative; top: 0; color: #33cc99; transition: top 0.7s; } /* --- hover effect : shift up --- */ ul.social li:hover a { top: -60px; } ul.social li a:after { position: absolute; width: inherit; height: 50%; left: 0; bottom: 0; color: #404040; line-height: 60px; text-align: center; } And that’s all. I hope you’ve found this tutorial useful, looking forward to your comments. Thanks. Terms of use : You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

In this tutorial, I will present you my alternative solution to the select form tag. It’s css-only and it looks simple but really nice. We will use a list of radio elements, styled as a drop-down list, that will look and behave similarly to the select element. Of course you have to provide some fallback for mobile devices (and IE8 if you wish). I discuss that briefly in the final part of this tutorial. Check the demo and choose your favorite beer. Step 1 - HTML Here is the html we use within a form <fieldset class="radio-container"> <div class="radio-options"> <div class="toggle">Choose your beer</div> <ul> <li> <input type="radio" name="my-beer" id="choice1" value="choice1"> <label for="choice1">Cul Dorcha</label> </li> <li> <input type="radio" name="my-beer" id="choice2" value="choice2"> <label for="choice2">Rowers Red Ale</label> </li> <li> <input type="radio" name="my-beer" id="choice3" value="choice3"> <label for="choice3">Belfast Ale</label> </li> <li> <input type="radio" name="my-beer" id="choice4" value="choice4"> <label for="choice4">O'Hara Irish Stout</label> </li> </ul> </div> </fieldset> Step 2 - The idea To make things simple I tried to "sketch" my idea. I hope it is clear enough. Step 3 - CSS Let’s add some css that reflect the idea presented in the scheme above. For the brevity of this tutorial I omit some parts of the css (e.g. triangle arrows) that only add some visual flavor - you’ll find the complete version in the attached files. Note that the vendor prefixes are omitted for the same reason. For the outer containter (".radio-container") we’ll have radio-container { position: relative; height: 4em; /* 3em (being the max-height of the inner container) + 1em ("margin") */ } .radio-container:hover { z-index: 9999; } And for the inner one .radio-options { position: absolute; max-height: 3em; width: 100%; overflow: hidden; transition: 0.7s; } .radio-options:hover { max-height: 100em; } Next .radio-options .toggle { position: relative; cursor: pointer; padding: 0.75em; background: darkgreen; border-radius: 10px; z-index: 1; } /* li are stacked at the same position as .toggle, only .toggle is visible */ .radio-options li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .radio-options label { display: block; opacity: 0; transition: 0s; } We hide the inputs, we could just use display : none, but that would not work in browsers (some mobile ones) where clicking the label does not focus the associated input. .radio-options input { position: absolute; top: 0; left: 0; width: 300px; height: 3em; opacity: 0; z-index:1; cursor: pointer; } Step 4 - What happens on hover - CSS continued Now let’s look closer at what happens on hover, already : .radio-container gets a high z-index and .radio-options increases its max-height, we’ll add /* li elements have a normal flow within the .radio-options container */ .radio-options:hover li { position: relative; } .radio-options:hover label { opacity: 1; transition: 0.5s; } Step 5 - input:checked To style the checked option we will use the general sibling selector. It uses a tilde character combinator (E ~ F) and matches elements that are siblings of a given element. The first element (E) has to occur before the second (F) one and they have to share the same parent (li items in our case). If one of the radio is checked, we’ll see its label instead of the toggle : .radio-options input:checked ~ label { position: absolute; top: 0; left: 0; right: 0; opacity: 1; /* is above the .toggle so is visible */ z-index: 2; /* has tha same styles as .toggle */ padding: 0.75em; background: darkgreen; border-radius: 10px; } On hover it returns to the normal flow .radio-options:hover input:checked ~ label { position: static; border-radius: 0; } Step 6 - What about mobile devices Since our element is activated on hover you’ll have to provide some fallback for touch devices. One solution is to leave the radio labels visible all the time not only on hover. Here is my solution to keep the drop-down list, I detect the touch devices with a custom modernizr build and add the following script $(document).ready(function(){ if (Modernizr.touch) { $(".radio-options").bind("click", function(event) { if (!($(this).parent('.radio-container').hasClass("active"))) { $(this).parent('.radio-container').addClass("active"); event.stopPropagation(); } }); $(".toggle").bind("click", function(){ $(this).parents('.radio-container').removeClass("active"); return false; }); } }) In my css I modify every :hover definition like that .no-touch .radio-container:hover, .active.radio-container { z-index: 9999; } .no-touch .radio-options:hover, .active .radio-options { max-height: 100em; } .no-touch .radio-options:hover li, .active .radio-options li { position: relative; } .no-touch .radio-options:hover label, .active .radio-options label { opacity: 1; transition: 0.5s; } .... Step 7 - What about IE8 Again, it’s up to you, the fallback solutions are not the main part of this tutorial. Here is my approach: <!--[if (IE 8)]> <script> $(document).ready(function(){ $(".radio-options li").bind("click", function() { $(this).siblings(".checked").removeClass("checked"); $(this).addClass("checked"); }); }); </script> <![endif]--> I have to add to my css the .checked class declarations, e.g. (see the attached files for the complete version): .radio-options .checked label { position: absolute; top: 0; left: 0; right: 0; padding: 0.75em; background: #1b9e4d; visibility: visible; z-index: 2; } .... That’s all. I hope you’ll find this technique useful, let me know what you think. Thanks. Terms of use : You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

Hello! Today, let’s celebrate the summer time with this simple css3 tutorial. We’ll discuss the hover effect but don’t hesitate to actually press the button - this pretty flat-design icons set by vector4free is free to download in vector format on their site. Let’s start - hover the "Free download" button below. Summer Icon Pack (ai) Free download Let’s start with the markup. Note that we add the data-title attribute to the link element - its value being exactly the link text. <a class="ph-button" href="#" data-title="Free download"> <span> <span>Free download</span> </span> </a> The idea is to have two button layers one over another, looking and positioned exactly the same except for the inverted colors. We’ll use an :after pseudo-element with the content passed via a custom data- attribute. Note that for the brevity of the code below the vendor prefixes are omitted. You’ll find the complete code in the download files. We use the Bowlby One SC Google Font. .button { display: block; position: relative; height: 3.4em; width: 10em; margin: .7em auto; overflow: hidden; } .button > span { display: block; position: absolute; overflow: hidden; left: 0; top: 0; width: 0%; height: 100%; transition: 1s ease-in-out; } /* .button:after and .button > span > span are identical except for the inverted colors */ .button:after, .button > span > span { display: block; text-align: center; border-radius: 0.625em; padding: 1em 0; } .button:after { content: attr(data-title); width: 100%; background: #4186b2; color: #67d6c1; } .button > span > span { width: 10em; background: #67d6c1; color: #4186b2; } /* what happens on hover */ .button:hover > span { width: 100%; } For a vertical instead of a horizontal effect like below: see on dribbble you would just have .button > span { .. width: 100%; height: 0%; .. } .button:hover > span { height: 100%; } That’s all - hope you got inspired. Thank you. Enjoy the summer!