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. 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. The divisions will all be rotated: the odd ones will be black and rotated 5 degrees and the even ones will be pink and rotated -5 degrees. Example 2
CSS Click Events
An article about different experimental approaches of employing click events using CSS only. It summarizes and shows some clever hacks and smart tricks. For the last few years, we’ve been witnessing the wonderful expansion of front-end languages especially HTML with the HTML5 specifications and CSS with the CSS Level 3 specifications. We can now do a lot of stuff we couldn’t have done without JavaScript or images before, like rounded corners, gradients, responsive layouts, grid stuff, transparency in colors, and so much more. But one thing we’ve always been missing is the possibility to handle click events with CSS. Anyway, as of today, CSS doesn’t provide any official way to handle a click event in CSS. Disclaimer This blog post is about showing the possibilities of CSS and some clever hacks. Plus, some of these techniques are not well supported by browsers, meaning it’s even more borderline; we intend to have some fun pushing the limits of CSS. Checkbox hack Aaaaah, the checkbox hack. Pros
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
Alsacréations : Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web
Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here! Letterpress – Isn’t that a type of industrial print method? That’s right! But the effect has also made its way into web design. Check out the previous feature showcasing examples of how designers are using this cool ‘de-bossed’ look on designs across the web. With the recent support of text-transform in Safari and Firefox (3.1+) the effect can easily be created without needing to use any image replacement techniques. View demo Start out by creating a simple background. <! <h1>Line25</h1> <h2>Pure CSS Letterpress Effect</h2> Set up a plain HTML document, then add a few lines of text to test the effect on. Style up the text using the usual CSS properties to edit the size and basic appearance. Now we’re ready to apply the text-shadow property. Simple!
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. 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: In this case the value of the "image-valued-shape" IMG element's shape-outside property is a local URL called "pipe.png". The shape-outside Property and float:left, float:right
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
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. 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. Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. Now, let’s make some hover effects!
