Sass vs. Stylus: Who Wins the Minimal Syntax Battle? Today we’re going to pit two CSS preprocessors head to head. You’ve no doubt seen lots of discussion about how SCSS compares to LESS, but where does Stylus, the new kid on the block, factor in? Can it possibly match the power and versatility of SASS? We’ll jump head first into both syntaxes and compare them side by side to see which is more logical and versatile. We’ll also talk about features and give you a clear argument for why one preprocessor is more powerful. You can rest assured, we’re not going to wuss out and give you some crap about a tie, there will be a winner! Sass, Not SCSS One little detail needs to be addressed before we dive into this any further. However, for the sake of comparison, Sass is actually much closer to Stylus than its sibling SCSS. Alas, this is not an article on the merits of Sass vs. Basic Syntax Let’s start with a direct comparison of both syntaxes at their most basic level. As you can see, they’re almost identical. Flexibility Basic Syntax Winner: Stylus
10 Professional Free CSS Editors CSS or Cascading Style Sheets is a particular type of web language that is used in order to describe the different semantics (that is the get up as well as the presentation) of a particular document. It is the most widely used application to develop the web pages those are written in HTML as well as XHTML. There are certain free CSS Editors which provide the user to incorporate new CSS and to distinguish the common CSS categories. With the help of these free CSS Editors the users can have a look at the changes almost instantaneously and can you have a firsthand impression about how the webpage will appear, and the effect it will have on your entire template. On choosing a particular tag, this editor will provide you a code that is an example compatible to that particular tag. A few free CSS Editors will give the users the chance to create the basic design very easily. Notepad++ editor PSPad Stylizer – Real-Time CSS Editing TopStyle 4 for Windows Xyle scope Rapid CSS Editor
5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours You’ve been coding for a while now and know your way around a CSS file. You’re certainly no master, but with enough fiddling you can get where you want to go. You’re wondering though if you’ll ever get past that point where CSS is such a struggle. Will you ever be able to bust out a complex layout without ultimately resorting to trial and error to see what works and what doesn’t? The good news is that you can indeed get past that frustrating point where you know enough CSS to code a website, but lack the solid foundation that allows you to code without the annoyance of not exactly understanding how you’re going to get where you’re going, and this point is a lot closer than you think. 1. If you really want to have a solid understanding of how to use CSS to move HTML elements to where you want them to go, you absolutely must get a grip on positioning contexts. There are actually five position values that you should understand. Resources To Get You There The Lowdown on Absolute vs. 2. 3.
Journey Into Mordor With CSS Today’s project is silly and fun, but it does have a real point and educational purpose. In a recent article, I explored five ways to use multiple CSS background images to create cool hover effects. I had one idea in that article that I didn’t get to simply because its complexity merited a standalone explanation. This article then is an extension of that previous discussion. We’ll be using multiple backgrounds to create a cool cinematic effect where someone traverses a map while the vantage point zooms out. The best and most nerd-tastic way to show this off is of course to use the familiar tale of Frodo crossing Middle Earth to arrive at Mount Doom in Mordor. The Concept The basic idea for this hover effect is simple. To make things even more interesting, I want the scene to start on a zoomed in view of the subject and then pan out to view the landscape as a whole. Why Middle Earth? The most practical use that I could think of for this idea was to show someone moving across a map.
How to Build a Fully Functional CSS3-Only Content Slider Content sliders are a great way to make a website more dynamic. They add flair, and if used correctly, could be the difference between a purchase and a back button. Normally, they would be built with jQuery or some other Javascript library. However, with the advent of CSS3, I will show you how to build one using only CSS. The result won’t be the most semantic thing to ever be made, but it will be completely functional nonetheless. Demo & Source Files View the DemoDownload the Source Files Screenshot Some simple HTML to start with Granted, that looks scary. We have a “content-slider” div, which holds all the content. Then, we have two sections: the “content” div and the “nav” ul. Now, right inside the “content” div, you’ll notice 6 nested divs: “content-inner-1” through “content-inner-6“. The Magical CSS As I said, all we did to the “content-slider” div was center it, and move it 100px from the top of the page. The “content” div styling is very important. Now, we have some generic styling.
CSS3 Transitions Without Using :hover Up to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class. Here’s a typical transition that changes link color on mouseover using pure CSS: This will animate the color property when you hover over a link on the page. You can animate CSS properties via transitions using some other CSS techniques, a number of which I’ve outlined below. Transitions Using :active The :active pseudo-class matches any element that’s in the process of being activated. Here’s some CSS and an accompanying demo that demonstrates using :active along with CSS3 transitions to mimic a mousedown event: With this code, the box’s width and height properties are animated to become larger as you hold the mouse down on the element. Here’s a demo: Transitions Using :focus You can use the :focus pseudo-class to do something similar. And here’s a live demo: Transitions Using :checked And here’s a simple demo: Transitions Using :disabled Here’s the demo:
Useful CSS Generators And Tools To Help The Common Web Designer It is quite lovely to see that new tools are launched pretty often to help web designers or web developers do their work easier. Although most of these below are new I’ve also included a few oldies but goldies that I’ve used over the years. They helped me on my projects and I’m sure they will also help you. There aren’t only CSS generators or CSS related tools, but also various javascript libraries, cross browser testing tools and more. CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. G5 Framework The 1KB CSS Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. CSS Compressor Use this Cascading Style Sheets, CSS Compressor to compress CSS to reduce CSS code size and make your web pages load faster. CSS Formatter and Optimiser Columnal CSS grid system Grid Designer inuit.css Fractal CSS Crush
Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows - Smashing Magazine Advertisement A visitor comes to your website all giddy to learn more about your product, when suddenly a snazzy slideshow loads with some snap. Impressed, they go to register and are greeted by a most elegant modal window. At this point they are finally overjoyed by the velociraptor that suddenly charges across their screen. Crafting a polished and unique experience for your users is becoming ever more critical as the Web gets more overloaded. Today, we are thrilled to introduce two new jQuery plug-ins that were developed exclusively for Smashing Magazine readers to liven up your developer tool belts: Orbit, a new slider; and Reveal, a modal plug-in. Why Create Our Own? Quickly, before diving into the details, some background would be helpful. Flexibility We use these plug-ins for clients, internal projects, our apps and a number of other places. Have a look at a couple of our previous articles: Orbit: jQuery Image Slider First up is our new jQuery slider, Orbit. The Code Neato Options (kw)
6 Methods For Vertical Centering With CSS Centering elements vertically with css is something that often gives designers trouble. There are however a variety of methods for vertical centering and each is fairly easy to use. Today I want to present 6 of those methods. You can view demos of each of the methods below by clicking here. Let’s start by first talking about something that doesn’t work as many expect. Vertical-Align Horizontal centering with css is rather easy. With text-align: center in mind, most people look first to vertical-align in order to center things vertically. However valign only worked on table cells. The values for vertical-align have meaning with respect to a parent inline element. With a line of text the values are relative to the line-height.With a table cell the values are relative to the table-height-algorithm, which usually means the height of the row. All is not lost though, as we have other methods for centering block level elements and we can still use vertical-align where appropriate. html css Summary
30 Useful CSS Typography Tricks CSS has given us an unmatched value and edge to give a new dimension to Typography. Typography is not just having a stylish font; it has a much wider aspect. The space, the style, Text display, the paragraphs fomentation, the technique, a combination of image and typography, and the list go on. Today we bring you some of the most effective CSS Typography Tricks and tips that will make your website look more impressive and engraining and that too with less effort. You can either go for the tutorials or the tools that will generate the code for you. If you like this article, you might be interested in some of our older articles on CSS Page Layouts, What’s Exciting In CSS3, CSS3 Tutorials, and Tips for Writing CSS. Advertisement TYPECHART lets you flip through, preview and compare web typography while retrieving the CSS. More Information on TYPECHART Typographic Grid If you have a site heavy on text content, author thinks paying fine-grained attention to the underlying grid is important. txt
Farewell Floats: The Future of CSS Layout Floats are one of the most basic tools for structuring a web page using CSS. They’re both one of the very first things that we learn about and one of the last things that we truly master. Today’s article looks at some of the reasons that floats are pretty lame and takes a look at a number of alternative layout systems, some of which are still under development but may one day represent the standard for CSS-based layout. A Tale of Tables Once upon a time, web designers used HTML tables to accomplish complex page layouts. For newbies, when I say “non-semantic,” I mean that table-based layout is a bastardization of the table element. Floats: The New Tables? Today, we scoff at this practice. Today one of the primary ways that we have replaced our table-dependent ways is the use of floats for layout. Though many of us have simply grown accustomed to using them, floats are far from ideal. The Clearfix Band-Aid Is creating an empty container to hack a broken layout a good practice? The Future
CSS button, 110 best! Tired of turning upside down the internet and not finding what you’re looking for? Well, here we’re providing you the best of our CSS buttons search. Here you’ll find over 100 buttons, among pure CSS and image + CSS made. Some people says there’s nothing new under the sun, however, we can always come up with new and exciting ways of apply and use things we already have, so the results will be a mind blower. btn_example{ display: inline-block; padding: 10px 20px; background:#066; border: 1px solid #f3f3f3; you’ll enhance hugely your button. There are many advantages to using CSS only buttons, as no images need to be downloaded, buttons expand to fit any amount of text and it’s easy to alter the size, colour and effects. BonBon Buttons The goal was to create CSS buttons that were sexy looking, really flexible, but with the most minimalistic markup as possible. Dark Navigation Menu Buttons Design with CSS Animated Buttons using CSS3 Transitions and Transforms TypeKit CSS Buttons Fancy Buttons
Useful HTML-, CSS- and JavaScript Tools and Libraries - Smashing Magazine Advertisement Front-end development is a tricky beast. It’s not difficult to learn, but it’s quite difficult to master. There are just too many things that need to be considered; too many tweaks that might be necessary here and there; too many details to make everything just right. Luckily, developers and designers out there keep releasing useful tools and resources for all of us to learn, improve our skills and just get better at what we do. Such tools are valuable and helpful because they save our time, automate mundane tasks and hence help us focus on more important things. Here at Smashing Magazine, we’re continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources for our readers, to make the search of these ever-growing tools easier. HTML and CSS Tools InitializrThis tool creates a customizable template based on HTML5 Boilerplate. Layer StylesA nice simple tool for creating CSS in an intuitive way — very much like you would do with a graphics editor. Grids