background preloader

CSS3 Image Styles

CSS3 Image Styles
When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image. Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output Related:  CSS3

CSS: Elastic Videos While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn't work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy. View the final demo and resize your browser window to see it in action. View Demo Elastic Videos Elastic HTML5 Videos (demo) With HTML5 video element, you can easily make it elastic by using the max-width:100% trick (see elastic HTML5 video demo). Elastic Object & Iframe Embedded Videos (demo) The trick is very simple. How to Create Fixed Width & Elastic To restrict the width of the video, an additional <div> wrapper is required. Compatibility Credits This trick was found on

Blur Menu with CSS3 Transitions There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we'll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering. View demo Download source There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. The images in the demos are by fabulous Mark Sebastian and they are licensed under the Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License. Please note that this will only work properly in modern browsers and unfortunately Internet Explorer does not belong to that category yet since it does not support transitions (and many other suggested CSS3 properties that others do support). The Markup Let’s create the HTML structure for our menu first. Now we’ll add some style!

Tabs with Round Out Borders Rounded corners are now trivially easy to achieve via border-radius. But that only allows us to cut into the shape. What if we want to connect a shape to another with a rounded outward corner. Much easier to explain with a graphic: Clean HTML Of course, on the web, just about anything visual is possible. <ul class="tabs group"><li class="active"><a href="#one">One</a></li><li><a href="#two">Two</a></li><li><a href="#three">Three</a></li><li><a href="#three">Four</a></li></ul> A class of active indicates which tab reflects the current page. How this is going down The reason this is tricky is that we need a shape to stick out of the tab element. Let's visualize this step by step, without looking out any code just yet. 1) Natural State 2) Float 3) Same Size 4) Just one 5) Circles We'll use two of our four available pseudo elements to place circles on the bottom left and bottom right of the tab. 6) Squares 7) Colorize the tab and content 8) Colorize the pseudo elements 9) Stacking 10) No borders Share On

Musings on the Relationship Between Grids and Guides Though it has been around for years in print design, the concept of working on the grid has become really popular in web design in recent times, especially with the success and availability of CSS frameworks like the 960 Grid System. Many tutorials and articles that I have seen make explicit use if grids, even going so far as to specifically recommend the use of one particular system. Musings on the Relationship Between Grids and Guides That’s great. Though certainly not a necessity, using a grid in web design is a great way to establish a strong, underlying structure that provides consistent, visual unity between the elements in a design. Personally, I’ve been used the 960 Grid System in several designs, and will be using some form of grid in the upcoming redesign of this very blog. As great as grids are, however, I do think that it’s important to distinguish them from another useful layout tool: guides. Grids A grid breaks space or time into regular units. Guides A common web grid

How To Create a Pure CSS Polaroid Photo Gallery Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling. View the Demo Check out the demo to see what we’ll be building. Start work by sourcing your images. Next, set up the basic page structure with a container centered on the page. Semantically lay out the collection of images in an Unordered List element, and wrap each image with an anchor to create a clickable link. Now we get start work on the CSS to style up the gallery. Give the images the Polaroid effect by adding a few styles to the anchors. To really add realism to the design, use the CSS3 box-shadow property to add some shading to the photos. Now we need to target each image individually, so go back and give each anchor a unique class name. With unique class names in place, we can then add unique styling to each photo. That’s all there is to it!

Responsive Design with CSS3 Media Queries Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. View Demo Responsive Design Download Demo ZIP See It in Action First Before you start, check the final demo to see how it looks like. More Examples If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr. Overview The page's container has a width of 980px which is optimized for any resolution wider than 1024px. HTML Code I'm not going to go through the details of the HTML code. HTML5.js Note that I use HTML5 markup in my demo. Reset HTML5 Elements to Block The following CSS will reset the HTML5 elements (article, aside, figure, header, footer, etc.) to block element.

postcard from Paris – css3 keyframes animations in use | PeHaa Blog postcard from Paris – css3 keyframes animations in use I decided to explore the area of css3 keyframes animations. The idea was simple – to create a sort of virtual postcard. I live in Paris so obviously I send you my greetings from Paris :). Click here or on the image to view the animation demo. The css3 animations are supported by : Chrome 2+, Safari 4+, Firefox 5+, iOS Safari 3.2+ and Android 2.1+ (source Smashing Magazine). The html structure is very simple : We will use the following images (I will discuss the sparkling effect a little bit later) Let’s start to complete the css stylesheet : Animating clouds To animate the three layers of clouds independently we use the following keyframes. This way we have defined the property of background-position for the beginning, middle and end of our animation. to associate the animations with the proper elements and to define the duration, timing-function and iteration count, respectively (I use the shorthand notation). Animating phare light

Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser. by Matthew James Taylor on 26 July 2008 A lot of people want centered menus on their website but for the CSS novice this task seems impossible. If you do a search online you will find a few centering methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers (display:inline-block; is an example). In this post I'm going to show you my secret method of achieving centered tabs that does not use any CSS hacks and will work in all the common web browsers. Centered Menu Basic Example Below you should see four horizontally centered tabs in this column of text, the second tab is set as active. See some more advanced centered CSS menu examples Centered Menu HTML The HTML used for centered menus is semantically structured and very basic. <div id="centeredmenu"><ul><li><a href="#">Tab one</a></li><li><a href="#" class="active">Tab two</a></li><li><a href="#">Tab three</a></li><li><a href="#">Tab four</a></li></ul></div> Centered Menu CSS Mac

Maximize the Use of Hover Usually, we create hover effects by changing: font color, font styles, border styles, background, and etc. But there are a lot more that we can do with hover. We can use hover to beautify design, minimize clutter, and display additional information. In this article, I'm going to provide various examples of websites that maximize the use of hover. 1. I use hover to beautify the layout of IconDock. 2. QBN makes its layout look cleaner by hiding the extra buttons on default. Gucci puts focus on their product images by hiding the variations. 3. Coda combines CSS and Javascript to create a beautiful tooltip. On Best Web Gallery, I use jQuery to display a larger image of the screencap. Tutorials Image Hover (see demo) The following CSS tutorial imitates the hover effect as seen on the Gucci and QBN site. Animated Hover (see demo) The following demo use jQuery to animate the <em> text when you hover the link, as seen on the Coda site. jQuery Tooltip

Bring Your Forms Up to Date With CSS3 and HTML5 Validation Let's look at how to create a functional form which validates users' data, client-side. With that done, we'll cover prettying it up using CSS, including some CSS3! First we want to conceptualize what our form is going to look like and how it is going to function. For this example, let's create a simple contact form that asks for the following information from the user: Name Email Website Message We want to make sure the user is entering the information correctly. Let's get an idea of what we want our form to look like by creating a rough mockup. As you can see, the following elements make up our form: Form Title Required fields notification Form labels Form inputs Placeholder text Form field hints Submit Button Now that we've specified which elements make up our form, we can create the HTML markup. Let's create our basic HTML markup from the form concept we created. Up to this point, our HTML file will still appear blank in the browser. Let's add some typographic styles to our form elements:

Related:  CSS3/HTML5Images