background preloader

CSS3 Filters: Altering HTML and Images with just CSS

CSS3 Filters: Altering HTML and Images with just CSS
CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work. Using just CSS we can accomplish some pretty complicated effects. These should be applicable to both images and HTML elements, but obviously browsers will vary for the foreseeable future. The property used to control all of this stuff is filter. filter: filter(value); As you might expect though, browser prefixes will be required. -webkit-filter: filter(value);-moz-filter: filter(value);-o-filter: filter(value);-ms-filter: filter(value); There are quite a few filter, so to get a better idea lets take a look at them individually. filter: blur(5px) brightness(0.5); There are a few filters that I won’t outline below, but these can be easily accomplished with already existing CSS (opacity and drop shadows). Blur Ever wanted to do a gaussian blur on an image or text with just CSS? Sepia

Related:  angelinasmithyackeyWEB DESIGNAdornments

CSS transitions, CSS transforms and CSS animation Browser Support for CSS transitions How to use transitions If you haven't used transitions before, here's a brief introduction. On the element you want to have animate, add the following CSS: There is a lot of duplication due to vendor prefixes - until the specification if finalised, this will persist. Inner Shadows In CSS: Images, Text & Beyond Shadows in CSS are quick and easy, whether you’re slapping on a box-shadow or a text-shadow. But how comfortable are you with inner shadows? Can you pull off an inset box-shadow? How do you do the same thing on some text? Today we’re going to learn some really simple inset shadow techniques that you can pull off with just a few lines of code. I’ll walk you through both the box-shadow and text-shadow syntax and how to change them to pull off an inset shadows.

Gaussian Blur and CSS3/SVG - CSS-Plus Edited: 07 January 2014 – Updated article to reflect current browser support. Gaussian blur is something I use a lot when it comes to Photoshop. It would be very handy to have that kind of ‘filter’ power within a browser environment. Pseudo-classes pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector. Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

Animating CSS Shapes With CSS Animations & Transitions Notes About Current Browser Support for CSS Shapes: The Shapes properties are still in flux at this time. Most of this article's demos use the shape-inside property, which will be temporarily removed from Webkit and Blink. The principles of animating shapes is applicable to both CSS Shapes and CSS Clipping masks. All the demos in this article use clipping masks to visualize CSS Shapes.

Cross-browser Image Blur with CSS In this article I’ll show how to blur photographs using CSS and SVG in modern browsers, with the usual caveats: the techniques I’ll demonstrate will work on all browsers, but only recent versions. blur is similar to the Gaussian Blur filter in PhotoShop; its inclusion in CSS3 and SVG means we can now achieve the same effects natively in the browser (for this example, using an image by Khalil Shah). One design caution: if used incorrectly or too frequently, blur may make your users feel that they are visiting your site after a week-long bacchanal, quickly producing a headache. Blur is often combined with a mouse rollover detection that undoes the effect, which I’ll also demonstrate in this article. As before, we’ll apply the easiest version first: the new CSS3 filter. Before that, our HTML5 content:

12 Things You Can Do with Lectora and Code Reading Time: 2 minutes I presented at my organizations quarterly Lectora brownbag luncheon this week on using Lectora and code (HTML/CSS/and JavaScript). It was a lot of fun preparing and I believe (hope!) Pure CSS Buttons, Hover Effect & Active Pseudo-Element You may remember the days when we used to lookout for custom image buttons. And for getting the hover and active states, we used to deploy JavaScript codes to change the image on hover and click. But there were issues of loading of three images for each state. Unless the images are loaded, the image used to disappear on mouse hover and click. Cross-browser filters with CSS and SVG For some time now, since Safari 6 and Chrome 18 were released, we’ve been able to use the –webkit-filter CSS property to apply graphical filters to HTML content. But it seems that many people aren’t aware that you can also do this in Firefox and — within a very limited set of parameters — IE9 and above. The reason for this is that all of these browsers support SVG filter effects, and CSS filter effects are basically shorthand functions that apply predefined configurations of SVG filters. CSS and SVG filters Applying filters in CSS is very easy; here’s an example of how you’d apply Gaussian blur to an element:

Using jQuery and Lectora to Customize e-Learning Courses This is the fourth and final part of my jQuery in Lectora® series, so we are going to build something exciting and learn something rather complex. But let’s first recap what we’ve learned so far: Part 1—Why jQuery is useful and how to include it in your title. We also enhanced a multiple choice question. Part 2—How to optimize your jQuery workflow and include external scripts. We also built a cool word clicker interaction and learned how to resize your page to fit any screen with Zoomooz.js.

CSS Lists & Counters Module Level 3 Abstract This draft contains the features of CSS level 3 relating to list styling. It includes and extends the functionality of CSS level 2 [CSS21]. Blur.js Take II - A post from jakiestfu To view Demos and to download, view the post here. Some time has passed since I wrote my hack plugin blur.js, and i thought I'd play around with the concept again, but in a different way. jQuery is required, and so is a modern browser. This is nothing more than a wrapper for CSS making it easy to work with, the CSS itself will be at the bottom of this post. customClass: uses this class for some of the inner workings of the script.radius: The blur radius you want to use (int)persist: Boolean, removes previously blurred elements. The option persist is used to fix the following scenario.