Media Queries CSS3 Lightbox Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way. View demo Download source With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. Please note that this will only work with browsers that support the :target pseudo class. Let’s do it! The Markup We want to show a set of thumbnails, each one having a title that will appear on hover. The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay. Note that we only use a navigation in the last demo. Let’s beautify this naked markup. The CSS And that’s all the style! Demos
Google Les sprites CSS - Alsacréations Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple). Les avantages des sprites CSS sont multiples : La technique des sprites CSS Principe (avec sprite)
Adaptive Images for Responsive Designs So you’ve been building some responsive designs and you’ve been working through your checklist of things to do: You started with the content and designed around it, with mobile in mind first. You’ve gone liquid and there’s nary a px value in sight; % is your weapon of choice now. You’ve baked in a few media queries to adapt your layout and tweak your design at different window widths. You’ve done a good job so pat yourself on the back. HTML has an <img> problem CSS is great at adapting a website design to different window sizes – it allows you not only to tweak layout but also to send rescaled versions of the design’s images. HTML is less great. Well, you could just use a high resolution image and the fluid image technique would scale it down to fit the viewport; but that’s sending an image five or six times the file size that’s really needed, which makes it slow to download and unpleasant to use. Well, OK. Adaptive image techniques Adaptive Images So, what does this solution do? Caveats
Flexy Boxes — CSS flexbox playground and code generation tool Flexbox browser support Three versions of the flexbox spec – each with different syntax – have been implemented in browsers. The two 2012 specs are roughly equivilant in terms of features, differing mainly in syntax. Flexbox 2012 — W3C Candidate Recommendation, September 2012 Opera 12.1+, Firefox 22+. More browser support info available on caniuse.com. Known issues Flexbox early 2012 Flexbox early 2012 (Internet Explorer 10) align-content (equiv. flex-line-pack) doesn't work if the cross axis dimension is set with min-width or min-height Flexbox 2009 Box wrapping is not supported. box-lines is the property in this spec to achieve wrapping, though unfortunately no browser implemented it. Flexbox 2009 (Firefox) Firefox has a number of non-trivial issues with its 2009 implementation: The setting display: box is treated as display: inline-box if there is no width set. Further reading Code and design by @pete_b.
CSS Buttons with Pseudo-elements In this tutorial, I'll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. View demo Download source Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past. In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. The font used is ‘Open Sans’ by Steve Matteson. Disclaimer:I’ll not be using CSS vendor prefixes in this tutorial or else it would be crazy long, but you will find them in the downloadable files. I avoided CSS transitions since, right now, Firefox is the only browser that supports them on pseudo-elements. Markup Example 1 I think this is the easiest one, with a very regular CSS. Then, we create the gray container using the ::before pseudo-element. Example 2
Modular front-end development with LESS I am constantly looking for ways to make my work as a front-end developer easier and more efficient, but it is only recently that I have paid my good friend CSS any real attention. This article will explore the benefit of organizing your code efficiently while keeping it reusable and modular. I am constantly looking for ways to make my work as a front-end developer easier and more efficient, but it is only recently that I have paid my good friend CSS any real attention. The whole movement to make this sector of front-end development easier started with grid systems and the idea of object-oriented CSS, and has since been made easier with extensions to the language itself in the form of CSS pre-processors — the two most well-known being LESS and Sass. This article will explore the benefit of organizing your code efficiently while keeping it reusable and modular. The tools of speedy CSS development Separate structure and skin. It would be better to write: And use CSS like this: And so forth.
All About Buttons: Inspiration, PSDs for Download, CSS Generators and Frameworks Whether they are used to subscribe to services, send a contact form or simply to call the user’s attention to a specific page, buttons are a very important part of websites. When well designed, they have the power to change conversion rates, bring new customers to a service or help users perform and validate specific tasks. No wonder web designers tend to put so much time and effort into creating nice, appealing buttons. All About Buttons Finding Inspiration on the Web: Button Showcases House of Buttons House of buttons is a nice Tumblr website that showcases great UI buttons spotted all over the web. Ui parade, Category “button” The website Ui parade showcases different pieces of user interface and has a special category for buttons. The Dailybutton The Dailybutton is yet another Tumblr blog that only showcases beautiful buttons. Button Tag on Dribbble I think I don’t have to present Dribbble to you these days, this website has found its place in the designer community. CSS Button Makers
10 Amazing and Creative CSS3 Experiments CSS is the acronym or the short form of the term cascading style sheets. It is basically used to describe the presentation semantics or the looks and formatting of the document. This document is initially written in a mark-up language. Although it is used for various different purposes but the most common purpose is to style or design the web pages. It can style those web pages that are written in either HTML or XHTML. Its our pleasure to share best resources for inspiration for developers and designers. 1) CSS Tricks 2) CSS3 Patterns 3) Experiment CSS3 Animation 4) CSS3D Clouds 5) Pure CSS3 Classic Train 6) 3D Animation CSS3 7) Cursor Monster 8) CSS3 – Walking 9) Cube 3D 10) CSS3 Experiment Related Post
Rotating Words with CSS Animations Using CSS Animations we will change or rotate some parts of a sentence. View demo Download source In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. Please note: the result of this tutorial will only work as intended in browsers that support CSS animations. So let’s start! In the following, we’ll be going through demo 2. The Markup We’ll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words: Now, ignoring the garbage placeholder text, we want each span of the rw-word to appear at a time. The CSS3 First, we will style the main wrapper and center it on the page: We’ll add some text shadow to all the elements in the heading: And add some specific text styling to the spans: The divisions will be displayed as inline elements, that will allow us to “insert” them into the sentence without breaking the flow: Now, we’ll run two animations. And that’s it folks! Demos