The CSS content property is a powerful way to add content to some elements via CSS. It is good because it allows you to add “formatting content”, that is things that you need in your presentation but isn’t the content itself, like quotes, icons (when you have text along with them), titles (not the text title, the HTML attribute).
But you may thinking now “Well, isn’t content always HTML’s job?” Well, most of the time it is.
Think about it a little bit: when you have a fancy quote, image caption, or even a custom icon for certain links (like “.pdf”), aren’t all these things just “decoration”? They are just there to clarify the message of your content, they are meaningless by themselves.
So we will learn simple and cleaner techniques to get some cool results via CSS! Although our title only mentioned smart quotes, we will do show you some other quick examples to get the most of this cool CSS trick.
So, let’s rock.Read More
It is pretty common to see step-based content. Tutorials, shopping carts, FAQ’s, grandma’s recipes. You know, numbers and steps are really good to grab attention, so many writers use this.
But, talking about HTML how should we write it? Most (all?) use numbers as text in headings, as they were common content.
Well, let me tell you a secret: They are doing it wrong.
Actually we are doing it wrong ( nothing against this fantastic post of Ruben, just take a look at how we do the numbers, directly in HTML as text ).
A little time ago I was wondering about this thing, isn’t it more a CSS job? Actually yeah, it is. We have to keep content in HTML and presentation in CSS, and since we may want other ways to order titles, they are all about presentation. But, how can we do this kind of thing? One class for each item? That would be terrible!
Then CSS counter property comes to save us. It is a pretty unknown property that allows us to perform a simple count via CSS. It will be better explained with our demos :D
So, let’s rock!Read More
With richer interactions and media heavy pages mushrooming on the web, creating web pages, which load faster and respond well has become a challenge. Separating the content, presentation and behavior of a page using HTML, CSS and JS, is not the only thing that front-end engineers have to concentrate on nowadays. The limelight is now on the performance of the pages, cleanliness and leanness of the code within, scalability and reusability of CSS, and the semantic correctness of the markup.
There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them.
This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.Read More
So you want to say something and get heard from anywhere. The best way to do this is with Twitter and its widgets. We will be talking about a profile widget, that shows your latest tweets, and a search widget, that runs a custom query search and shows all the results.
They have a pretty simple customization when you generate them, but what many people haven’t noticed is that you can make advanced customization to them with CSS. This is possible because the Twitter team has made it without using any inline CSS rules, and they are such nice people that almost all their CSS is quite simple to overwrite (just with the class of the item itself in most cases).
Then, what you have to do is to turn on your CSS Zen Garden side and let your imagination create awesome widgets in a really simple way.
So, let’s rock!Read More
I hope you have heard a little about CSS3 and HTML5. And I’m sure you’ve used at least one of the cool features they offer. But now it is time to use them at their full (or almost full) power.
You may be asking yourself “It is time to change? Should I forget everything I know and dive into this new world?”. Well dear padawan, you don’t need to do so. We have a lot of tools that make our transition to new and better technologies safer (ultimately we can’t just crash our customer’s website, we have bills to pay :D).
Frameworks are helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point.
This time we will talk a little about frameworks and other tools, like generators and templates.
So, let’s rock.Read More
CSS and HTML are key languages to begin with, when you decide to invest your time in web design and development. They are powerful languages and most of the time may seem simple to work with.
However, every single one of us, beginners, or advanced developers, have committed basic or major mistakes working with both these languages. With this in mind, I believe it is extremely important and always welcome to learn some good tips and practices which I hope will help you improve your skills and experience.Read More
Today we will get a perfect and simple blurry menu effect via CSS. In addition to it, we will get a useful multiple borders effect. To achieve this effect you will need to have a basic understanding of HTML and CSS. We will work with IE filters and text-shadow, but there is no reason to worry if you have never used it, they’re all well and simply explained.
And the best part is that anything done here works almost anywhere, from IE6 to real browsers.
So, let’s work!Read More