Mes liens
796 shaares
176 results
tagged
Css3
Last week, I asked “Should You Hyphenate?” This week, I’m going to assume that you decided to answer in the affirmative and talk about some good practices (I don’t know if they’re best practices just yet). This post was actually triggered by a comment from Kevin Hamilton on last week’s post. He said, in part:
You may want to exclude hyphenation on <code> tags within your blog. For both readability purposes (since many CSS tags already make heavy use of hyphens) and to avoid introducing some confusing/misleading references… Is it re-peating-linear-gradient? Or perhaps repeating-lin-ear-gradient?
He’s absolutely right, of course. If you’re going to blog about technical topics, or even if you’re just writing a style sheet that you expect to release into the wild for use by anyone, there are some elements that you should avoid hyphenating. And since hyphens is an inherited property, it isn’t sufficient to set it for a limited number of elements and assume you’re done. You have to make sure you’re turned it off for the elements that shouldn’t be hyphenated.
You may want to exclude hyphenation on <code> tags within your blog. For both readability purposes (since many CSS tags already make heavy use of hyphens) and to avoid introducing some confusing/misleading references… Is it re-peating-linear-gradient? Or perhaps repeating-lin-ear-gradient?
He’s absolutely right, of course. If you’re going to blog about technical topics, or even if you’re just writing a style sheet that you expect to release into the wild for use by anyone, there are some elements that you should avoid hyphenating. And since hyphens is an inherited property, it isn’t sufficient to set it for a limited number of elements and assume you’re done. You have to make sure you’re turned it off for the elements that shouldn’t be hyphenated.
SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?!
A simple stylesheet for rendering beautiful keyboard-style elements.
KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS, et présenté sous forme de concentré de bonnes pratiques et d'expériences sur le terrain.
À la fois mini framework documenté et reset CSS, KNACSS s'adapte à tous les projets quelle que soit leur taille.
À la fois mini framework documenté et reset CSS, KNACSS s'adapte à tous les projets quelle que soit leur taille.
We’re a group of developers working towards a markup-based means of delivering alternate image sources based on device capabilities to prevent wasted bandwidth and optimize display for both screen and print.
This CSS3 generator is totally useless if you don't use the auto generated CSS3 snippets in your projects!
As a web designer, you can use CSS3 to create many cool effects which were earlier achievable only with images and photo editors. But if you start to write the css codes manually, it will be real difficult to remember all the syntax and visualize the effects just with the codes. You may need to change the code several times and refresh your web page to achieve the appearance you want.
This CSS3 generator can save you from this hassle by providing you with the simplest graphical interface to create the perfect appearance. Once you are done, you can directly copy and paste the auto-generated css snippets and save a lot of your time and energy. This is upto you to turn this CSS3 Generator useful!
As a web designer, you can use CSS3 to create many cool effects which were earlier achievable only with images and photo editors. But if you start to write the css codes manually, it will be real difficult to remember all the syntax and visualize the effects just with the codes. You may need to change the code several times and refresh your web page to achieve the appearance you want.
This CSS3 generator can save you from this hassle by providing you with the simplest graphical interface to create the perfect appearance. Once you are done, you can directly copy and paste the auto-generated css snippets and save a lot of your time and energy. This is upto you to turn this CSS3 Generator useful!
I discovered how to create circular images using CSS3 the other day and thought it was totally awesome. The only drawback is that the image has to appear as a background image. You can’t really do this effect directly to an image that is displayed using an image tag. What this means is that no one will be able to actually click and drag the image onto their desktop, but that might be totally okay with you.
Most of us know that with the introduction of what we customarily call “CSS3″1, there have been changes and additions to CSS, compared to what we had in CSS2.1.
Putting all cross-browser issues aside, I thought it would be nice to be able to document all these changes into a single post and keep it up to date.
So if you want a list of everything that’s been introduced into the CSS spec since CSS2.1, here it is.
Putting all cross-browser issues aside, I thought it would be nice to be able to document all these changes into a single post and keep it up to date.
So if you want a list of everything that’s been introduced into the CSS spec since CSS2.1, here it is.
By Keenan Payne
How to create a simple CSS3 tooltip
Nov. 28, 2012 | CSS3 | 18 comments
Tooltips are a great way to show your user more information by simply hovering over an image or text. They can be used, for example, to provide captions for images, or longer descriptions for links, or any useful information which would improve the user experience of your site, without intruding on the design.
How to create a simple CSS3 tooltip
Nov. 28, 2012 | CSS3 | 18 comments
Tooltips are a great way to show your user more information by simply hovering over an image or text. They can be used, for example, to provide captions for images, or longer descriptions for links, or any useful information which would improve the user experience of your site, without intruding on the design.
There now is an abundance of devices with some sort of high-density display, from MacBook Pros to iPads, from Windows Surface tablets to all kinds of mobile phones.
All of these devices have one thing in common: In web browsers (that support the high-density screen correctly) one CSS pixel is not equal to a physical screen pixel.
In terms of CSS, to specifically target this group of devices, unfortunately there’s no easy way to say “apply this set of rules to all devices where physical pixels are not equal to CSS pixels”. Instead you have to fight through a whole forest of media query rules.
All of these devices have one thing in common: In web browsers (that support the high-density screen correctly) one CSS pixel is not equal to a physical screen pixel.
In terms of CSS, to specifically target this group of devices, unfortunately there’s no easy way to say “apply this set of rules to all devices where physical pixels are not equal to CSS pixels”. Instead you have to fight through a whole forest of media query rules.
Last year, Microsoft announced that IE10 will not be supporting conditional comments. With their history, this is obviously a risky move. Up to now, to target quirky behaviour in IE6-9, developers have been using conditional comments, conditional classes, and other IE-specific hacks.
But without conditional comments in IE10, the only options we’re left with to target CSS problems are hacks or browser sniffing — and we certainly don’t want to resort to the latter.
Interestingly, there have been a few posts and code snippets floating around that apparently do target IE10 specifically using a hack. Below is a summary of these three techniques, for reference.
But without conditional comments in IE10, the only options we’re left with to target CSS problems are hacks or browser sniffing — and we certainly don’t want to resort to the latter.
Interestingly, there have been a few posts and code snippets floating around that apparently do target IE10 specifically using a hack. Below is a summary of these three techniques, for reference.
In today’s article I will mostly talk about my own experience, and what I have learned about CSS after almost one year and a half of heavy practicing.
First, let me remind you that CSS is an extremely simple language. It can be summed up in 3 words: selector, property, value. Nothing more, really. This is why some people don’t like CSS at all: because they feel like children playing with LEGOs.
Yup. Explain the basics of CSS to a 9 years old child and he or she will be able to create a website. Not a complex one I agree, but maybe a few pages with headers, links, content, images, and such.
But the fact that CSS is an easy language doesn’t mean everyone is on the same level. Some people use CSS like a chimp uses a fork, some people are okay to good with it, and some people can do magic with it.
From what I can tell, I’ve been playing around with CSS for almost two years now and on what I would call a heavy level for something like 7 months. I’m still far from perfect, and there are still some tricks I don’t know or understand.
First, let me remind you that CSS is an extremely simple language. It can be summed up in 3 words: selector, property, value. Nothing more, really. This is why some people don’t like CSS at all: because they feel like children playing with LEGOs.
Yup. Explain the basics of CSS to a 9 years old child and he or she will be able to create a website. Not a complex one I agree, but maybe a few pages with headers, links, content, images, and such.
But the fact that CSS is an easy language doesn’t mean everyone is on the same level. Some people use CSS like a chimp uses a fork, some people are okay to good with it, and some people can do magic with it.
From what I can tell, I’ve been playing around with CSS for almost two years now and on what I would call a heavy level for something like 7 months. I’m still far from perfect, and there are still some tricks I don’t know or understand.
What's the easiest way to scale background images in responsive layouts? We use an old technique and enhance it to fluidly change the aspect ratio of background images.
Responsive layouts make it possible to dynamically scale the width of a website to fit on small mobile devices as well as larger desktop computers. An <img> element with a percentual width will have its height automatically adjusted. Its aspect ratio remains the same when it is resized.
If we want to accomplish the same with background images we must figure out how to maintain the aspect ratio of any HTML element.
Responsive layouts make it possible to dynamically scale the width of a website to fit on small mobile devices as well as larger desktop computers. An <img> element with a percentual width will have its height automatically adjusted. Its aspect ratio remains the same when it is resized.
If we want to accomplish the same with background images we must figure out how to maintain the aspect ratio of any HTML element.
Je ne suis pas un gros fan de responsive design. Ce qui me dérange, ce n'est pas vraiment le fait d'adapter des mises en page à la taille de son navigateur. Ce n'est pas vraiment nouveau, et on a même retrouvé un exemple datant de 1999. La vraie nouveauté, c'est la possibilité d'utiliser des fonctionnalités natives de CSS pour parvenir à ce résultat. Mais ce qui me dérange, c'est que la technologie actuelle ne nous permet pas de proprement résoudre ce problème.
Au début du mois, Apple a sorti l'iPad mini. C'est une belle machine, aux caractéristiques très proches de l'iPad 2. Et ça c'est embêtant pour nous, pauvres intégrateurs, car l'iPad mini et l'iPad 2 ont la même résolution d'écran, mais pour une taille d'écran bien différente (respectivement 7,9" et 9,7"). Avec si peu de différence, Apple a fait en sorte que toutes les applications sur iPad mini fonctionnent comme sur iPad 2. Et c'est donc valable pour Safari, où il est presque mission impossible de détecter l'iPad mini, même via user agent ou device-pixel-ratio.
Au début du mois, Apple a sorti l'iPad mini. C'est une belle machine, aux caractéristiques très proches de l'iPad 2. Et ça c'est embêtant pour nous, pauvres intégrateurs, car l'iPad mini et l'iPad 2 ont la même résolution d'écran, mais pour une taille d'écran bien différente (respectivement 7,9" et 9,7"). Avec si peu de différence, Apple a fait en sorte que toutes les applications sur iPad mini fonctionnent comme sur iPad 2. Et c'est donc valable pour Safari, où il est presque mission impossible de détecter l'iPad mini, même via user agent ou device-pixel-ratio.
When it comes to responsive design we are faced with various techniques on how to best handle altering our navigation menus for small screens. The resources seem endless. That’s why I’m going to show you four main concepts and discuss the advantages and disadvantages of all of them.
Three of them are made with pure CSS and one uses a single line of JavaScript.
Three of them are made with pure CSS and one uses a single line of JavaScript.
This site teaches the CSS fundamentals that are used in any CSS layout.
I assume you already know how to make things colorful. You know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. Let's see if we can save you some fury on your next project.
I assume you already know how to make things colorful. You know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. Let's see if we can save you some fury on your next project.
Today, we are going to do a lot of stuff with CSS animations. Indeed, we will talk about CSS loading animations. What do you say? Ready?
A few things before we start:
- You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files.
- The goal of the tutorial is to show the potential of CSS, particularly CSS3, that’s why the rendering could be altered on IE9-. If you plan to support these browsers, be sure to make fallbacks.
- I personally use the box-model where [width] = [element-width] + [padding] + [borders]. I activate it with the following snippet:
A few things before we start:
- You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files.
- The goal of the tutorial is to show the potential of CSS, particularly CSS3, that’s why the rendering could be altered on IE9-. If you plan to support these browsers, be sure to make fallbacks.
- I personally use the box-model where [width] = [element-width] + [padding] + [borders]. I activate it with the following snippet:
In this tutorial we will try to recreate the scrolling effect you’ve seen on the new e-bay site. We’ll create a simple responsive one-page site presenting the beauty and benefits of lavender. No javascript needed – we will use only css.
Typicons are free-to-use vector icons embedded in a webfont kit for easy use in your UI, whether it be on the web or in a native application.
Typicons save space and time by pairing a vector icon to a character, just like Webdings or Windings. Then, using the CSS3 pseudo-selector ::before, the appropriate characters are bound to their respective classes (eliminating the need to remember the correct index of each icon).
Typicons save space and time by pairing a vector icon to a character, just like Webdings or Windings. Then, using the CSS3 pseudo-selector ::before, the appropriate characters are bound to their respective classes (eliminating the need to remember the correct index of each icon).
The future of CSS gives us much to be excited about: On the one hand, there’s a whole range of new methods that are going to revolutionize the way we lay out pages on the web; on the other, there’s a new set of graphical effects that will allow on-the-fly filters and shaders. People love this stuff. Magazines and blogs are full of articles about them.