Get flash to fully experience Pearltrees
Working often with CSS for my own website or for my job makes me trying always to be organized and that made me thinking about a thing. What is the best way to organize my CSS file(s)? With this article I will try to present you a short guide about CSS organizing. 1.Group your CSS files into a folder Beside your main CSS file you may want to use also a print CSS file or why not a CSS file for the IE6 browser. Placing them together in a folder named css for example will help you improve your website back-end structure.
A while ago you’ve read a quick tutorial here about setting up your website with custom fonts using @font-face . Since then I’ve been thinking to write about these alternative solutions, pros and cons. The aim of this post is to briefly round up your options when using custom fonts in web design. CSS3 @font-face The @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5.
At my beginnings as a web developer, when I first discovered how to clear floats I was so happy and it was for sure an “a-ha” moment. Since then, so many things have changed and new clearing methods have appeared. One thing remained the same: the need to clear floats. In this article, we’ll see some effective solutions for clearing floated elements. But first, what is float? Arranging website page elements was always a struggle for you as a web developer.
This article is about creating a form using some of CSS3 properties. You can easily customize the style. The HTML The HTML code of the form is given below. We use label for each input field, and wrap it in a div. Adding style to Form
Using pseudo-elements like :before and :after helps you specifying which content should be inserted before (or after) the content of an element. Replaced elements like input or img have no content, therefore, you shouldn’t be able to use generated content for them. But, there’s almost always a but, it seems that you can use generated content on a number of replaced elements that varies from browser to browser. This is something that has intrigued me lately and that’s why I decided to write down this article.
We all try to be very creative when it comes to designing a website navigation. It’s a sure thing: a good looking navigation menu can really enhance your website. I wrote before about how to create different menus and today you’ll learn how to create another stylish CSS3 navigation menu. View demo
This entry is part 16 of 16 in the CSS3 Mastery Session - Show All « Previous Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features. Step 1: Building the Navigation Bar Let’s begin with a basic menu, built with an unordered list and some basic CSS styling. < ul id = "menu" > < li >< a href = "#" > Home </ a ></ li > < li >< a href = "#" > About </ a ></ li > < li >< a href = "#" > Services </ a ></ li > < li >< a href = "#" > Portfolio </ a ></ li > < li >< a href = "#" > Contact </ a ></ li > </ ul >
Topic: CSS3 Difficulty: Intermediate Estimated Completion Time: 30 mins In this tutorial we will learn how to create an accordion menu in pure CSS3 . This menu was inspired in Futurico UI Pro by Vladimir Kudinov . As we will create it with CSS this will only work on browsers and devices that support the :target pseudo-class selector. Step 1 – HTML Markup Create an unordered list with an anchor tag and a span tag.
It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features. View demo Here’s a quick preview for the CSS3 animated dropdown menu that we’re going to create today:
Whether you’re designing a website or a web application, you’ll need buttons for it. Now, with CSS3′s help, it was never easier to create nice looking buttons. In this article you’ll learn how to create some cool CSS3 buttons in just a few steps.
Ever since I started working for one of my CSS3 breadcrumbs example, I thought about writing this tutorial. In this article, I will use a similar technique in order to create some good looking CSS3 tabs. While in my previous CSS3 tabs tutorial I tried to simulate some beveled corners for the tabs, this time I will show you how to create folder tabs using nothing more than pure CSS3. View demo The HTML
Styling ordered lists was always a tricky task and I’m not the only one who thinks that. To style numbers you need to remove default browser styles and add hooks to your lists elements in order to target them and style accordingly. In this article you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach. The idea When I first read Roger Johansson’s article about styling ordered list numbers, I must admit I seriously felt in love with that technique.
Our journey to the world of CSS3 shadows continues. Today we will focus on another interesting feature—how to use multiple backgrounds with CSS3. There are many reasons why you may need to create a composition of multiple images to build your background. I think the most important are the following:
via Ad Packs animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.