Creative Gooey Effects. A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components.
View demo Download source Today we are going to show how to use SVG Filters to apply a gooey-like effect to HTML elements. We’ll first cover some basics of the technique and then we’ll demonstrate several creative use cases for common website elements, like menus, apps, selections, paginations and more. Please note that this effect is experimental and is only supported by modern browsers. Let’s first dive into SVG Filters and understand how to apply them.
SVG Filters With SVG Filters we can modify a given source graphic with an operation (or more) and create an altered result. FeBlendfeColorMatrixfeComponentTransferfeCompositefeConvolveMatrixfeDiffuseLightingfeDisplacementMapfeFloodfeGaussianBlurfeImagefeMergefeMorphologyfeOffsetfeSpecularLightingfeTilefeTurbulencefeDistantLightfePointLightfeSpotLight The result looks as follows: SVG Filters for HTML. jQuery TwentyTwenty Plugin. Need to highlight the differences between two images?
TwentyTwenty, a visual diff tool, makes it easy to spot them! Download TwentyTwenty. Pure CSS Off-screen Navigation Menu. Hamburger menu, drawer menu, off-canvas menu: Whatever you call it, hiding a website’s primary navigation just off screen is becoming a ubiquitous pattern in responsive web design.
More and more sites feature a fixed-position icon that, when tapped, pushes the entire site to the side to reveal a hidden navigation menu. While there are plenty of jQuery plugins that will create this effect for you, it’s actually pretty easy to achieve without using any JavaScript at all. This article will show you how to make a simple version of the off-canvas menu and sliding effect using only CSS. Before we get started, I’d like to make a note that using this method for creating the drawer menu means your site’s navigation will always be in a drawer, regardless of viewport size.
If you only want the drawer menu on smaller screens, you’ll have to use some JavaScript to manipulate the DOM order or use some funky CSS to make the menu look right on larger screens. Here’s a CodePen demo showing the end result: jQuery Image Slider - Carousel. Créer un menu sticky avec JavaScript et CSS. J’ai bossé récemment sur plusieurs sites web, et la requête d’un menu sticky était quasiment systématique.
Parfois elle était justifiée, parfois je me rapprochais du contre-exemple ergonomique stéréotypé. (Dois-je utiliser un sticky menu ?) Mais quand même ! Je vous propose de voir ensemble comment on peut faire ça. Concept du menu sticky J’aime bien partir d’une idée et poser quelques éléments par écrit pour ne pas partir tête baissée dans le code. Je veux bien diviser le fond (HTML), la forme (CSS) et les interactions (JS), et dans cet ordre là précisément. Le comportement attendu est celui-ci : J’ai un en-tête avec un logo et un menu qui sont « classiquement » positionnés. Nous aurons à la fin quelque chose dans ce goût : Démonstration La structure de notre menu sticky Je vous invite à utiliser cette structure de menu, et éventuellement à copier/coller le Lorem Ipsum de ma page de démonstration pour avoir du contenu et pouvoir scroller dans votre page. Slick - the last carousel you'll ever need. Set up your HTML markup.
<div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file.
Set up your HTML markup.