background preloader

Creative CSS3 Animation Menus

Creative CSS3 Animation Menus
Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We'll be exploring some different effects for the elements. View demo Download source Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The icons used in the demos are actually a Web Symbols typeface that we’ll include with @font-face. The Markup The HTML structure for the menu will be an unordered list where each item is a link element that consists of an icon span and a content div that will contain the main title and the secondary title: As we are using a symbol font for the icons, we write letters for the icons. The CSS The common style for all the examples will be the inclusion of the symbol typeface: Example 1 Example 2

Original Hover Effects with CSS3 The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. View demo Download source Please note that this will only work properly in modern browsers that support the CSS3 properties in use. The Markup The structure of markup is very simple and intuitive. Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image. <div class="view"><img src="image.gif" /><div class="mask"><h2>Title</h2><p>Your Text</p><a href="#" class="info">Read More</a></div></div> The CSS After creating our markup we’re going to set our style. And now we’ll look at the ten effects. Example 1 And now comes the heart of our effect. Example 2 Example 3 Example 4

CSS3 2D Transformations The Transformation module is a tremendous addition in CSS3, it takes the way we manipulate elements on a website to the next level. There are some experiments that really amaze me, examples such as this one. However, we are not going to build something like a CSS-only icon that can somehow transform into an Autobot, as it may be overwhelming and not quite usable in real life as well. Instead, this time, we will be stepping back and reviewing the basics of CSS3 2D Transformations to see how it works at a fundamental level. The Syntax The CSS3 Transformations module basically allows us to transform an element to a certain extent such as translating, scaling, rotating and skewing. The official syntax is transform:method(value). transform: method(value); -o-transform: method(value); -ms-transform: method(value); -moz-transform: method(value); -webkit-transform: method(value); The Value Most of the method’s value will correspond to the X-axis and Y-axis. Except for rotations. I – Translate

Animated Buttons with CSS3 Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states. View demo Download source The icons used in some of the examples are by and the symbol font is by Just Be Nice We’ll go through every example and see how the HTML structure looks and what the styles for the normal, the hover and the active states are. Please note that the animations/transitions will only work in browsers that support those CSS3 properties. In order not to bloat the tutorial, I will not be using any CSS vendor prefixes. Example 1 In this example we will create a big button with several details in it. Markup The structure is pretty straightforward: the icon will be an image and the other elements will be spans: In the style we will make sure that the right transitions are set on the element that we want to animate on hover. Example 2 Example 3 Example 4 Example 5

CSS3 Transitions, Transforms and Animation Tutorial A lire - Design a clean sports web layout in magazine-style with Photoshop I spend my days developing websites, improving WeGraphics and playing football. Well, I’ve tried to mix these three activities designing a blog-magazine style layout, perfect for an on-line football/sport community. This kind of websites generally are focused on the content because they should provide a lot of information to the readers and in this case I’ve choosen to bring out all the contents (the articles) giving more relevance to images and headings. The reason behind the choice of using large images is the direct consequence of my love for this sport: browsing a football-related website I need images, pictures, figures, colors, videos… I want to see my favourite champions. From psd to html/css… In this first tutorial I’ll show you how to realize the layout in Photoshop. Below you can take a look to the final result of our efforts. The Final Result A grid-based magazine web layout with a clean design and a nice look to engage the visitors. Step 0 – The canvas Step 1 – The background

tutoriels A lire - Converting a clean magazine-style PSD template to HTML/CSS Previous week on WeGraphics we went through the process of designing a clean layout in magazine-style with Photoshop. Now it’s time to convert the visual mockup in a working web page using HTML and CSS. This tutorial will be an overview, with some tips and advices, on how to convert a psd to HTML; it won’t be a complete and specific explanation on HTML tags, CSS properties and techniques but a look to my entire process of getting from Photoshop the HTML layout. The result of the previous tutorial was a modern and clean psd layout ready for coding. To refresh your memory, let us take a look at the design below. Test the live preview in your browser to see how the template will look after the HTML conversion. Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Understanding the general structure The first step is the key to create a robust and optimized layout. From PSD to HTML/CSS – The HTML code Step 0 We are ready to start. <!

CSS3 Patterns, Explained Many of you have probably seen my CSS3 patterns gallery. It became very popular throughout the year and it showed many web developers how powerful CSS3 gradients really are. But how many really understand how these patterns are created? The biggest benefit of CSS-generated backgrounds is that they can be modified directly within the style sheet. This benefit is void if we are just copying and pasting CSS code we don’t understand. Important note In all the examples that follow, I’ll be using gradients without a vendor prefix, for readability and brevity. The syntax described here is the one that browsers currently implement. If you are not yet familiar with CSS gradients, you can read these excellent tutorials by John Allsopp and return here later, as in the rest of the article I assume you already know the CSS gradient basics: The main idea I’m sure most of you can imagine the background this code generates: background: linear-gradient(left, white 20%, #8b0 80%); See this example live

A lire - Designing Websites to Increase Traffic and Conversion Generating traffic and turning it into conversions is at the forefront of a businesses' online marketing strategy. In an era where they may fight for clicks and spend an insurmountable amount of time getting their websites to the top of search pages, it’s important to evaluate just what turns a visitor into a customer. In this article I will disseminate the qualities that make a website bridge the gap between being visited frequently and one that makes the most out of the traffic that comes its way – ones that turn visitors into customers. Besides a stunning design, there are many factors that determine whether a customer sticks around. Conversion A website may look promising, but if visitors aren’t converting it’s time to step back and adjust your strategy. What is Conversion? If your website has a high number of visitors converting into customers, your site has a high conversion rate. Factors in Website Conversion The Design The Call to Action The Copy The goal of your website is to sell.

Quick Fun: CSS3 Filter Effects « GirlieMac! Blog I quickly played with the brand-new CSS Filter Effects on the latest WebKit Nightly! (Edited: Now also supported on Chrome Canary 18.0.976.0 +) Click the images to view in the full size. This is a default screen. No filter added. blur(radius) to create Gaussian blur -webkit-filter: blur(2px); The default is 0, no blur. brightness(amount) -webkit-filter: brightness(30%); The default is 100%. Updated: I am not sure when it has modified, but it seems that not the accepted value is the range between -100% (dark) and 100% (light), and the default is 0. contrast(amount) -webkit-filter: contrast(30%); grayscale(amount) -webkit-filter: grayscale(); The default is 100%. sepia(amount) invert(amount) -webkit-filter: invert(); opacity(amount) -webkit-filter: opacity(30%); The default is 100%, no transparency. Saturate(amount) -webkit-filter: saturate(50%); Saturate(amount) – the amount over 100% is also allowed. -webkit-filter: saturate(300%); hue-rotate(angle) -webkit-filter: hue-rotate(90deg); drop-shadow(

A lire - Top 50 Photoshop Web Layout Tutorials from 2011 We all know that Photoshop is the best computer software program for editing digital photos and images.But it is also excellent for web designers.Most of the web designers use Photoshop to design web layouts. Today we have compiled really high quality photoshop layout tutorials from 2011.I’m sure that you will learn many new photoshop techniques from these tutorials. Create an Elegant Photography Web Layout in Photoshop View Tutorial Create a Modern Lab Theme Web Design in Photoshop View Tutorial Create a Consulting Web Layout-business layout View Tutorial How to Design a Trendy WordPress Theme View Tutorial How to Create an Advanced Game Portal Layout View Tutorial How to Create a 3D Portfolio Layout View Tutorial Graphic Design Studio Web Layout Tutorial View Tutorial Create a Gritty Portfolio Layout – Moleskine Layout View Tutorial Create A Dark, Clean Website Design In Adobe Photoshop View Tutorial Design a Sleek, Dark Mobile App Website View Tutorial Design a Professional, Clean Community Blog Theme