Display inline-block, une valeur trop peu utilisée Floatera, floatera pas… mais pourquoi ne pas utiliser la valeur inline-block de la propriété display en CSS ? Vous connaissez certainement les valeurs block ou inline, mais moins celle de inline-block et pourtant elle peut vous servir dans bien des cas. Voyons dans quelles conditions nous pouvons l'utiliser (de manière non exhaustive) dans un premier temps, puis dans un second temps quelques difficultés dans son utilisation. Cette astuce a été publiée initialement sur le blog personnel de l'auteur, creativejuiz.fr à la date du Jeudi 17 mars 2011. Utiliser display: inline-block Par défaut les éléments input ont comme valeur de display celle de inline-block. Le formulaire Quelle transition ! Je vous propose cette forme de mise en page pour formulaire. Notre code CSS va donc nous permettre d'avoir un comportement homogène. La CSS : Aperçu du formulaire Une navigation horizontale (éléments de liste) Le code HTML : Le code CSS : Remarque : la valeur inline sur le li est suffisante dans mon exemple.
Standardista 25 Useful CSS3 Techniques and Tutorials Learn how to earn $125 or more per hour as a freelancer - Click Here Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN for 20% off Css3 have a capacity to revolutionize the way we design/develop website. css3 is intoducing loads of new and exciting features. It is essential today for a web designer to know about CSS3 and there are many tutorials and resources for the CSS3. 1.) We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling). 2.) Analogue clock created using webkit transition and transform CSS. 3.) The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. 4.) What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? 5.) 6.) 7.) 8.) 9.) 10.) 11.) 12.) 13.) 14.) 15.) 17.)
Apprendre HTML5, CSS3 pour créer un site web À travers de nombreux exemples pratiques et cas concrets, Alsacréations vous propose de découvrir toutes les possibilités offertes par la conception web aux normes, HTML, XHTML, HTML5, les feuilles de style CSS et CSS3, le Web mobile, l'accessibilité, PHP, JavaScript, jQuery, etc. Tutoriel : Guide pas à pas Article : Document d'analyse ou de référence Astuce : Court stratagème toujours utile Cette page présente une sélection de nos ressources. Vous pouvez aussi consulter la liste complète des tutoriels et articles ou des astuces. Pensez à utiliser le moteur de recherche. Comprendre le positionnement en CSS Consolidez et élargissez vos connaissances des différents schémas de positionnement CSS actuellement utilisés ou avant-gardistes (flux, positionnement absolu, fixé, relatif, flottement, inline-block, modèle tabulaire). Découvrez nos formations web, leurs programmes, les dates des sessions et les tarifs sur le site formations.alsacreations.fr
Circle Hover Effects with CSS Transitions From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: <ul class="ch-grid"><li><div class="ch-item ch-img-1"><div class="ch-info"><h3>Use what you have</h3><p>by Angela Duncan <a href=" on Dribbble</a></p></div></div></li><li><div class="ch-item ch-img-2"><div class="ch-info"><h3>Common Causes of Stains</h3><p>by Antonio F. The CSS Example 1
Original Hover Effects with CSS3 The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. View demo Download source Please note that this will only work properly in modern browsers that support the CSS3 properties in use. The Markup The structure of markup is very simple and intuitive. Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image. <div class="view"><img src="image.gif" /><div class="mask"><h2>Title</h2><p>Your Text</p><a href="#" class="info">Read More</a></div></div> The CSS After creating our markup we’re going to set our style. And now we’ll look at the ten effects. Example 1 And now comes the heart of our effect. Example 2 Example 3 Example 4
CSS transform-origin Coming to SVG Defining CSS Shapes with the circle, rectangle, and ellipse shape functions is easy and pretty effective if what you want are circles, rectangles or ellipses. For more complex shapes you can use the CSS polygon function. However enumerating a polygon's vertices can be tedious. Tools can take much of the pain out of the task, but it still tends to be a slow process. It's often the case that complex shapes are intended to mirror the boundary of an image's (transparent) background. Doing this is easy and very effective because shapes can be defined with images directly. Most of the articles I've written have focused on how the implementation of some recently landed feature works. Image Valued Shape Basics The CSS shape-outside property specifies a shape which inline content must wrap around. An image valued shape is defined with a URL that refers to an image, typically a PNG, or an SVG document: The shape-outside property can only be specified for left or right float elements.
Slopy Elements with CSS3 It's always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. Inspired by many superb designs that use non-straight elements, I want to show you some simple examples and ways how to create slopy, skewed elements with CSS only. View demo Download source It’s always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. So, let’s begin! Example 1 In our first example, we want to have a pretty normal layout with a little twist: we want a diagonal separation between the elements. The Markup Let’s create a section for our whole content and inside we’ll add some divisions with the class se-slope. Now, let’s check our the style. The CSS The body will have the same background color like all the even se-slope elements, which is pink. Let’s center the article: Example 2
Filter Functionality with CSS3 Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type. View demo Download source The idea is inspired by Roman Komarov’s brilliant “Filtering elements without JS” experiment where he uses checkboxes and radio buttons for filtering colored shapes. The beautiful Dribbble shots used in the demos are by Mike from Creative Mints. The Markup Let’s start with the markup. The unordered list will contain all the portfolio items as anchors with an image and a span. The CSS We’ll be going through three example effects, but first, let’s take a look at the common style. I will omit all the vendor prefixes, but you will, of course, find them in the files. The main section container will have a specific width: Let’s move on to the item list: Example 1 Example 2
Text Blocks Over Image Someone recently asked me about this technique and my first reaction was that it was probably a little too mundane to cover as a tutorial. But then I got to thinking that there is actually a few interesting things happening here and the style is trendy enough people might be interested. The idea is just to overlay some text over an image, but as blocks that stick out from the left with an even amount of padding all the way around the variable-length text. Here is a screenshot example: View Demo The Schematics The HTML <div class="image"><img src="images/3754004820_91a5c238a0.jpg" alt="" /><h2>A Movie in the Park:<br />Kung Fu Panda</h2></div> Putting the image in as a background image of the wrapping div would be easier, but in this scenario I see the images as content, and thus belongs in the HTML. The CSS This is going to put our text right up on top of the image nicely, but it doesn't accomplish the transparent black box we want to achieve behind the text. Problem Fixing Semantics Share On