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
Bring Your Forms Up to Date With CSS3 and HTML5 Validation
Let's look at how to create a functional form which validates users' data, client-side. With that done, we'll cover prettying it up using CSS, including some CSS3! First we want to conceptualize what our form is going to look like and how it is going to function. For this example, let's create a simple contact form that asks for the following information from the user: Name Email Website Message We want to make sure the user is entering the information correctly. Let's get an idea of what we want our form to look like by creating a rough mockup. As you can see, the following elements make up our form: Form Title Required fields notification Form labels Form inputs Placeholder text Form field hints Submit Button Now that we've specified which elements make up our form, we can create the HTML markup. Let's create our basic HTML markup from the form concept we created. Up to this point, our HTML file will still appear blank in the browser. Let's add some typographic styles to our form elements:
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
CSS Reset
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!
25 CSS3 Transitions and Animations Effects Tutorials
Advertisement With the current and updated CSS3 transitions and animations, web developers have better options during the web development process. In fact, there were superseded techniques since the aim is to make the building of sites, easier, efficient, and faster. There are handfuls of advantages with the aid that CSS3 transition tutorials provide, especially to novice webmasters. This allows better experience not just to the person who is in charge in designing, and developing of website, but this is also a learning process. The primary benefits can be seen on the site itself where it can interactive, and interesting since the browsing experience that the users or visitors of the site will be remarkable, compared to the typical look of most of the websites online. Pseudo-Elements Animation and transitions It is easy and simple to customize your animations. Simple Icon Hover Effects It comes with CSS for animation and transitions for your website. Caption Hover Effects CSS3 Bounce Effect
