20+ Amazing CSS3 Text Effect Tutorials and Experiments
OK, so you’ve designed that nice web page of yours, picked the right backgrounds and colors for it to set the adequate tone and atmosphere for your visitors or clients, decided on the appropriate icon sets to make the browsing even more accessible, exciting and interesting, but how about the text? You still haven’t thought about it? If not, don’t despair, because we’re here to help! There is always Photoshop you can create some nice fonts and insert text with, but there is also CSS3 – a very nice style sheet language that can make the browsing experience and thus your website design aspect even better! CSS stands for cascading style sheets and is a great way you can improve the accessibility of the content, provide an enhanced flexibility and control over web elements such as fonts, text and colors. Moreover, there is no need to use flash elements or javascript codes. You can create some pretty nice text effects and many more nice stuff with CSS3. Fun With CSS Text-Shadow Flashlight
MSBuildShellExtension
CSS3 Solutions for Internet Explorer
Advertisement Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use). Opacity / Transparency I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. The Syntax You really only need the second line, which works in all versions of Internet Explorer. The Demonstration This is the same element without the opacity settings. The Drawbacks Box Shadow
The Shapes of CSS
Learn Development at Frontend Masters CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. We also get the ::before and ::after pseudo elements in CSS, which give us the potential of two more shapes we can add to the original element. Square Rectangle Circle Oval Triangle Up Triangle Down Triangle Left Triangle Right Triangle Top Left Triangle Top Right Triangle Bottom Left Triangle Bottom Right Curved Tail Arrow via Ando Razafimandimby Trapezoid Parallelogram Star (6-points) Star (5-points) via Kit MacAllister Pentagon Hexagon Octagon Heart via Nicolas Gallagher Infinity via Nicolas Gallagher Diamond Square via Joseph Silber Diamond Shield via Joseph Silber Diamond Narrow via Joseph Silber Cut Diamond via Alexander Futekov Egg Pac-Man Talk Bubble RSS Feed via Kevin Huff 12 Point Burst via Alan Johnson 8 Point Burst via Alan Johnson Yin Yang via Alexander Futekov Badge Ribbon via Catalin Rosu Space Invader via Vlad Zinculescu TV Screen Magnifying Glass
Creating a CSS3 Dropdown Menu #2
Creating CSS3 Dropdown Menu #2 This is our second drop down menu. Today it is in the green palette. The menu will include a submenus that will slide when we hovering the parent elements. That menu will good for green palette templates. Here are final result (what we will creating): Here are samples and downloadable package: Live Demo download in package Ok, download the example files and lets start coding ! Step 1. As usual, we start with the HTML. index.html Step 2. Here are used CSS styles. css/style.css Step 3. Our menu using only single image to reach custom backgroundwith and fading effect. Conclusion Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment :) Good luck! Initial idea has been taken from here. If you enjoy our articles, feel free to share our tutorials with your friends.
Kaxaml
Mastering CSS Gradients in Less Than 1 Hour
Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects? Well, it’s time to kill those 1px wide images, my friend. If you’re just curious about how to use CSS Gradients, this is the place for you. Remember, learning about CSS gradients is really important since browsers are getting better and better every day. So, let’s rock! Basic syntax The first thing you must be aware of is browser support. We’ll focus on “standard” browser rules here (e.g. we won’t talk about old from() to() rules), and we’ll have a chapter on IE compatibility at the end (since its filters don’t allow all the effects we’ll see here). This is the basic syntax: This CSS will get this result: So, here are the items explained: Here is an example making use of color positions: Multiple gradients Let’s dig a little deeper and see more cool stuff you can do. Ok, let’s play with some code now:
Starting to Write CSS
Don't you feel that CSS is not the same anymore? Last few years became a hot topic and many smart people talked about it. CSS is not that little thing which front-end developer should do to make the page looks pretty. It's far more then that. We care about performance and we want to produce better web sites. In this article I want to share what I learned last few months and what exactly is my vision about CSS coding. CSS Preprocessors Ok, let's face it. Concatenation I think that one of the most valuable thing which came is the concatenation of your files. Extending There are two main CSS preprocessors - LESS and SASS. The problem here is that if you define a mixin without parameters i.e. if you have just this goes to the final compiled CSS file, no matter if it is used or not. It looks almost the same. There are two good things happening. Configuration Both LESS and SASS support definition of variables. Another handy usage of the variables is interpolation. Against the preprocessors or Atoms
CSS Sprites, What is it and How to use it?
You’ve probably heard about CSS sprites, but do you know what they really are and why you should use them? A simple answer is that a sprite is a composition of multiple smaller images into one large image. See the thumbnail of this post for an example. It might sound a little counterproductive to create a larger image, because it might take longer to download it right? Well, that’s not exactly true. CSS Sprites – How It Works Image Courtesy: Image Shack Whenever a user comes to your site, the browser has to load each and single one of the images, unless they are already downloaded. If you’re sitting on a low latency network, say 50ms, and the web page has 20 images and other external files, it will take a minimum of 20*50*2 = 2 seconds of additional time to load the page, not counting the image size. Most browsers are capable of downloading multiple resources at a time. That’s not much, but when you include the download speed, it goes up to at least half a second. How to Use it Conclusion
