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
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
20 Scroll Animation Plugins You Must Start Using Flip Keep your website up to date by using these outstanding scroll animation plugins which follow the web design trends of 2017. Make your website interactive by using various animation effects that trigger when you scroll. These effects will definitely make your website more appealing and keep your users engaged. You can have scrolling animation that uses the vertical or horizontal space. No matter which technique you choose, be careful no to exaggerate with the effects since these might be a little tiring and can make your website load slower. This is an amazing scrolling effect that you can quickly incorporate in your designs. This is a creative scroll effect that, when using the mouse-wheel, your layout will move from right to left, in a horizontal position. This is an amazing scroll animation plugin that you can use right away. This is a very creative jQuery scroll effect that demonstrates that, with the right technique, you can do just about anything. ScrollReveal.js
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. 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. Let's wrap the inside h2 of the in a span: Problem Share On
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. 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. color: #222; text-shadow: 0px 2px 3px #555; 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. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it! 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: 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! The CSS Example 1 And now, the interesting hover action!
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. 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.) 16.) 3D Cube using new CSS transformations