Page 1 of 1

CSS 3 QuickTip: WebKit reflections with CSS! Rate Topic: ****- 2 Votes

#1 Vip3rousmango  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 56
  • View blog
  • Posts: 98
  • Joined: 10-February 10

Posted 30 March 2011 - 02:17 PM

CSS 3 QuickTip: Reflections with CSS

Nifty CSS trick for Webkit Browsers!


Introduction:

Welcome to my 3rd tutorial! This one will be much shorter in length than my previous ones! I found this little tidbit while reading throught my CSS course materials and thought I should share it. This is an intermediate level tutorial, but a clever beginner can pick this up easily. I assume you already know how to create (X)HTML markup and understand the "basics" of CSS. These topics will not be covered in this tutorial. Total tutorial time is 20 mintues.

Background Info, Applications & Notes:

Not a widely known fact is that WebKit browsers (Google Chrome, Apple Safari(OS/X, iOS),Flock etc..) support CSS reflections! Yup, those fancy photoshop reflections you see all the time on photos can now be done to images, elements, even live video using CSS 3 and a webkit based browser (and yes, the video will play back in the reflection)!! Photoshope seems kinda lame now huh?!

You can view a ------>>> live example <<<------ of this tutorial anytime.


This example should also work on most iPhones, iPad's and iTouch as they are all running Safari (a webkit browser). So now you can spice up your mobile portals without fluffing the filesizes of images because you want some sexy reflections.

***NOTE 1: You will need a WebKit browser (Safari, Chrome, Flock, Your iPhone) to test and correctly view what the tutorial is highlighting. I can't help if you arn't using a webkit browser as none other support these features. END NOTE***

***NOTE 2: All code provided is taken from the Live Example used. I'm going to assume you already know the elements that make up an HTML page so we'll focus directly on the content of the page where the images, what we want to put reflections on, are residing. This is the best live example I could think of, editing a website template! In this case, a premade example using my website. This is something you could end up doing for a client at some point if you're freelancing or use web design for work or for making some extra cash so practical experience is always good! Don't hesitate to message me or post if you have any questions! END NOTE 2***

Let's Begin: HTML Mark-Up

Here we have a "full-width" <div> Parent. Inside as children, we have our elements which make up content on the main part of a website. The <img> tags are the images we are going to be applying our custom classes to.
<!-- full-width START here -->
      <div class="full-width">
      	<div class="tut-box"> If you like this tutorial check out my others on: Dream.In.Code.net! <span class="close">x</span> </div>
      	<h3>CSS 3 Reflections</h3>

        <p>The images around this paragraph both have CSS reflections assigned to them using custom CSS classes. Here are the left and right classes for the images respectively.</p>
        <img src="images/services/service1.jpg" alt="" class="leftref" />
        <img src="images/services/service6.jpg" alt="" class="rightref" />
        <p><code>Nemo enim ipsam voluptatem <a href="#">link test</a> aspernatur aut odit aut fugit, sed quia consequun magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem exercitationem corporis suscipit laboriosam.</code></p>
        <div class="two_third center">
        <p>Nemo enim ipsam voluptatem <a href="#">link test</a> aspernatur aut odit aut fugit, sed quia consequun magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem exercitationem corporis suscipit laboriosam.</p>
        </div><!-- End 2nd Paragraph -->
      </div>
      <!-- full-width END here -->


If you noticed in the above code, we defined a leftref and rightref classes to the <img> tags. This will allow us to isolate them specifically and assign our styling and reflections. Lets start this now!

Let's Begin: CSS Mark-Up


After styling your images for your design, we can add the reflections into the classes required to get our effect. The reflection will have no effect on layout (other than being part of a container’s overflow), and can be thought of as similar to box-shadow. So here is the first CSS property: -webkit-box-reflect: <direction> <offset> <mask-box-image>;
Example 1:
/* Class that controls Left Reflections */
.leftref {
	float:left; 
	margin-right:8px; 
	margin-bottom:2px; 
	border: 0px; 
	margin-top:5px;

	-webkit-box-reflect: below 4px; 

}

/* Class that controls Right Reflections */
.rightref {
	float:right; 
	margin-left:8px; 
	margin-bottom:2px; 
	border:0px; 
	margin-top:5px;

        -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));
	
}


In our first image class. I added the reflection positioin and distance between them, but no background mask. This is the minimum required to get a reflection, it just mimics the image below with a gap between them of 4px. But the image reflection is solid, and looks ugly so lets make the right image class more practical for design, like we did above.

For our right image class, we added a -webkit-gradient(); value for the background mask. This gives the reflection a nice transition to start transparent from the top and then end up solid white by the bottom.
If you're new to -webkit-gradient, or gradients in general their are plenty of online resources for you to learn about them.

The from() and to() are actually just helper functions for color-stops but why am I bringing this up, you ask? Good question!

Let's say we don't want to display the whole image in a reflection, that could take up too much space. Using additonal color-stop inside the -webkit-gradient() gives us this option of choice. Now we'll apply it to the left class so you can see the difference between them now.
Example 2:
/* Class that controls Left Reflections */
.leftref {
	float:left; 
	margin-right:8px; 
	margin-bottom:2px; 
	border: 0px; 
	margin-top:5px;

	-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

}

/* Class that controls Right Reflections */
.rightref {
	float:right; 
	margin-left:8px; 
	margin-bottom:2px; 
	border:0px; 
	margin-top:5px;
	
	-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));
	
}


So what did we do differently? We added an extra transparent stop colour. We're telling it that .7 (or 70%) should be transparent (and the remaining .3 [or 30%]) should turn to white. You can play around with that number (between 1 - 9 obviously) to see how much reflection you like to suit your taste or project.

And that's it for this tutuorial! You successfully learned how to add CSS reflections for webkit browsers to spruce up some designs! Hurray!

Their are many additonal features you can play around with. Think of it like a mirror, any changes you do to the image will reflect below to the reflection as well including borders, rounded corners, margins, padding etc... you get the idea. So have some fun with it! I would love to see what people come up with.

Enjoy and happy coding!

Is This A Good Question/Topic? 2
  • +

Replies To: CSS 3 QuickTip: WebKit reflections with CSS!

#2 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 342
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Posted 21 July 2011 - 12:58 AM

A good tutorial, well done. I would just like to point out that Flock is (or at least always used to be) based on Firefox, therefore it is Gecko rather than Webkit!
Was This Post Helpful? 0
  • +
  • -

#3 azizmuda  Icon User is offline

  • New D.I.C Head

Reputation: -4
  • View blog
  • Posts: 33
  • Joined: 14-February 11

Posted 20 October 2011 - 07:49 PM

Nice tutorial.
Thank you :)
How to get the result to put reflection near from the real..??

This post has been edited by azizmuda: 20 October 2011 - 07:51 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1