Crafting this look used to require photo editing software. But that’s no longer the case. You can add stunning blur effects using CSS and JavaScript. And it’s easier than you may think.

There is also a wide array of possibilities. You could opt for that simple blur on a photo. But you can also combine the effect with animation and user actions. This allows you to add some creativity to the mix.

With that in mind, let’s explore eight excellent examples of CSS and JavaScript blur effects in action.

The post 8 CSS & JavaScript Snippets for Creating Blur Effects appeared first on Speckyboy Design Magazine.

However, many website owners overlook the potential of customizing excerpts for style and functionality. When done correctly, custom excerpts can enhance the appearance of your website’s homepage and also provide additional utility to your visitors.

We have curated a collection of ways to elevate excerpts beyond just a simple piece of text on your homepage. The following CSS and JavaScript snippets include creative ways to improve the appearance and functionality of excerpts. These custom excerpts can add a touch of professionalism to your website and make it stand out from the crowd. Let’s dive in!

Excerpt Tabs by Kevin Lesht

When space is limited, this tabbed navigation example could be of great use. Think of it as a way to showcase posts from specific categories. The way it’s currently set up, you’ll get just one post per tab. But with a little creative coding, you could make each tab home to, say, the top 5 posts from each category.

See the Pen Simple Tabs Widget by Kevin Lesht

Scroll to Full Article by Ryan Altvater

One trend we’re seeing is using excerpts on an article’s page itself. Here we have a snippet that displays the excerpt upon the page’s loading. Then, scrolling reveals the entire article below.

In this case, the user’s viewport is detected via JavaScript and is used to display the article at a specific point during the scroll. This enables the use of some fancy special effects.

See the Pen Element Viewport Detection by Ryan Altvater

It’s All in the Card by Kitsune

Content cards have turned into a very popular way to display a list of articles. Design-wise, they can be very organized and compact. They also provide a nice visual separation between posts – making for easier reading.

What’s interesting about this example is that, instead of linking to a full post on a separate page, this card allows you to read the entire article right within the same container. The use of the scrollbar makes this extra handy. This one’s probably best for shorter content.

See the Pen Article Card UI – Read More CSS Animation by Kitsune

CSS Reveal by Mack Richardson

The right image can certainly serve as a useful way to provide readers with a hint as to the contents of an article. If your site has a focus on using featured images, this example might be right up your alley.

It uses pure CSS to reveal a text excerpt as the user hovers over an image/headline card. This won’t work for every site, but it adds a nice bit of interactivity when paired with great imagery.

See the Pen Text Overlay Using CSS Transitions by Mack Richardson

A Revealing Perspective by Michal Niewitala

A different take on the hover reveal can be found in this example. Rather than the multi-column card layout, this resembles more of a traditional blog. The advantage here is that it allows for larger headlines and can handle excerpts of various lengths.

See the Pen Article list concept with background image by Michal Niewitala

Full Screen Intro by Romswell Roswell Parian Paucar

This example targets an article’s page and provides a full screen to show off a title, excerpt, and featured image. Scrolling down then reveals the full article. This could add a nice touch to long-form content.

See the Pen Article Intro Effects by Romswell Roswell Parian Paucar

Stand in the Spotlight by JL

At first glance, the excerpts below look nice enough. But hovering over an article is where the real magic happens. The chosen article’s container expands, while a dark background mutes the others in the listing. What a great technique for making content stand out.

See the Pen Reveal article display by JL

More Than Words

The examples above are proof that excerpts don’t have to be boring. They can become an asset in both UX and your overall design. With a bit of creative thinking, you can add some extra layers of interactivity and tempt users to keep on clicking.

The post 7 CSS Snippets for Creating Content Excerpts appeared first on Speckyboy Design Magazine.

It’s also a feature that inspires a high level of creativity. That makes perfect sense, as the ability to present images uniquely helps you stand out.

Web designers are taking advantage. They’re using the latest CSS and JavaScript techniques to create abstract layouts and compelling special effects. Everything from enhancing the basic grid gallery to otherworldly user interfaces is being developed.

With that in mind, here are eight unique photo galleries to help inspire your next project.

CSS Animated Mini Photo Gallery by Alvaro Montoro

Size is the standout feature of this photo gallery snippet. Traditionally, galleries tend to take up large portions of our screens. This “mini” gallery turns that practice on its head, with animated transitions packed into a tiny space. And it requires zero JavaScript!

See the Pen animated Mini Photo Gallery by Alvaro Montoro

Sliding Image Track with CSS & JavaScript by Hyperplexed

This gallery also makes efficient use of space while adding interactivity to the mix. Swipe the gallery horizontally to both reveal images and experience a cool parallax effect. The whole presentation is attractive but subtle.

See the Pen Sliding Image Track by Hyperplexed

Accordion CSS Image Gallery by Stefan C.

Accordion UIs are incredibly flexible. Sure, they can hold plain text content – but where’s the fun in that? We’re starting to see them used more for multimedia, as is the case with this silky-smooth gallery.

See the Pen Accordion Image Gallery by Stefan C.

Hexagon Gallery in CSS by Gabriela Johnson

How about going beyond basic squares and rectangles? Thanks to features like CSS -clip-path, all kinds of interesting shapes are possible. Here we have a beautiful hexagonal grid with some slick hover effects added in for good measure.

See the Pen Hexagon Gallery by Gabriela Johnson

Responsive CSS Photo Gallery Grid with Lightbox by Majed

Adding a lightbox to a gallery has traditionally required JavaScript. That’s no longer the case, as this responsive snippet displays full-sized images via CSS. In addition, the use of CSS grid and flexbox makes for a gorgeous masonry layout. There’s a lot to like here.

See the Pen Responsive Photo Gallery Grid with Lightbox and – No Script by Majed

Layered Horizontal Scroll Gallery with CSS by Ivan Bogachev

Check out the stunning level of detail in this horizontal gallery. Each image is carefully layered, with various opacity levels creating a seamless look. Hovering over an image reveals its full-color view, while scrolling unlocks animated transitions.

See the Pen Horizontal Scroll Gallery (Locomotive Scroll) by Ivan Bogachev

Flex Image Gallery with Hover Effect by Cynthia Costa

Perfect for portfolios, this gallery uses Flexbox to power a full-width masonry layout. Captions are revealed upon hovering, as is the image’s true color. And each image can be hyperlinked so visitors can learn more. It also adjusts beautifully to smaller screens.

See the Pen Flex image gallery with hover effect by Cynthia Costa

Puzzle Grid Gallery by Goran Rakic

Here’s another example of a gallery that takes the idea of shape to another level. Hover over an area of this puzzle to reveal the full image. Given the level of visual complexity, it’s also impressive to see that this snippet still works well on mobile devices.

See the Pen Puzzle Grid Gallery by Goran Rakic

Photo Galleries as a Work of Art

There’s nothing wrong with a basic photo gallery. But there are also times when it pays to kick things up a notch. The snippets above are perfect examples.

Artfully presenting images entices users to interact. And it doesn’t have to come at the cost of performance, thanks to modern CSS and JavaScript. Nor does it mean a clunky mobile experience. Galleries can maintain their looks and functionality across screens.

The post 8 CSS & JavaScript Snippets for Creating Unique Photo Galleries appeared first on Speckyboy Design Magazine.

Thanks to the latest CSS and JavaScript techniques, these effects are also dazzling web users. Everything from relatively simple reflection details to light-bending refractions is popping up on our screens. Even highly-realistic behaviors are possible.

Today, we’ll introduce you to some outstanding code snippets that bring mirror, reflection, and refraction effects to life. Let’s take a look!

Bonsai animation by Kamil

This gently-animated bonsai provides a calming feel that belies the serious technology that makes it work. It utilizes SVG and the GSAP animation library to create a lovely water reflection effect.

See the Pen Bonsai animation by Kamil

PBR Reflection by ycw

Here’s a very unique snippet that features multiple effects. First, there’s a rotating shape that hovers in front of a mirror-like surface. Notice the shiny reflection underneath as well. The lighting and shading are gorgeous. You can also use your mouse or touch to change the perspective.

See the Pen PBR Reflection by ycw

Mirrored Light Orb Cursor Movement by Diana Le

This snippet is proof that mirror effects can be applied in unconventional ways. Two brightly-colored orbs appear against a black background. Move your cursor to take control of the left (white) one, while the other mirrors your movements. Dragging these orbs all over the screen in tandem is more fun than it should be!

See the Pen Mirrored Light Orb Cursor Movement by Diana Le

GLSL: Refracted rays by Liam Egan

The color and texture of this animation are mesmerizing. Rows upon rows of spheres move toward you, while your cursor position changes the refraction index. The look ranges from glassy to old-school television static. HTML 5 canvas and JavaScript are used to create the ultra-smooth movement.

See the Pen GLSL: Refracted rays by Liam Egan

Pure CSS text mirror by Tim

Mirrored text is surprisingly easy to implement. With just a few dozen lines of pure CSS, you can achieve an attractive effect that is sure to grab a user’s attention. The secret is in the CSS transform property, which flips the mirrored version upside down. From there, a gradient is used to create a more realistic look.

See the Pen Pure css text mirror by Tim

Text Refraction by Juan Fuentes

Add some custom text and this snippet will make it look as if it’s being viewed through a crystal ball. Cursor movements change both the perspective and size of the effect. When combined with the colorful background, the whole presentation has a 1960s vibe to it.

See the Pen Text Refraction by Juan Fuentes

Phone Reflection by Luke Lincoln

Check out this abstract take on a modern obsession – staring blankly into your phone. Click on the phone and simulated text reflects slowly up the subject’s body. It’s similar to what you might see in a darkened movie theatre.

See the Pen Phone Reflection by luke lincoln

Three.js Reflection by seanwasere

Speaking of abstract works, this virtual game board is something to behold. Mirrored 3D balls roll around as light bounces off of them. You can also change the perspective of the scene, adding even more intrigue to the outstanding special effects. If astronauts play games in space, this might be the one.

See the Pen Three.js Reflection by seanwasere

Adding a New Perspective to the Web

Amazing as it may seem, developers are crafting some seriously stunning mirror, reflection, and refraction effects for the web. Not only do they look incredible, but many also make great use of physics to add a layer of realism as well.

The post 8 CSS & JavaScript Snippets for Creating Reflection & Refraction Effects appeared first on Speckyboy Design Magazine.

CSS blend mode is one such revelation. It allows elements to display colors from both the foreground and background layers. This works in much the same way that Photoshop blend modes do – making for some interesting effects.

While browser support is not 100% as of this writing (thanks for nothing, or almost nothing, Microsoft), designers are already exploring what can be achieved with blend modes. Here’s a look at some of the more exciting examples we found.

See the Difference a Blend Can Make by Tyler Duprey

Let’s start off with this handy demo, which shows what each blend mode does to a background image. Use the drop-down menu and see how various modes affect the display. The amount of variation might surprise you.

See the Pen CSS Blen Modes by Tyler Duprey

Themed Background by Paul Noble

Here’s a practical usage of CSS blend modes. Select a photo within this gallery, and it shows more than just the full-sized image. You’ll also find a blended and blurred version of the image in the background, making for a more immersive experience.

See the Pen Themed, CSS blended background blur gallery by Paul Noble

Filter & Blend by Chris Johnson

The amount of potential image manipulation possible with CSS is kind of amazing. This tool offers visual proof, letting you adjust the base/mid/highlight effects and the colors used. The result can be something that looks far and away different from the original.

See the Pen Filter + Blend Modes Demo by Chris Johnson

Small Code, Big Results by Alvaro Felipe

This carefully blended photo offers a solid example of what can be accomplished with just CSS. What makes it all the more impressive is that the style sheet is a mere five lines in length. It’s a matter of setting up a photo background, adding a gradient, and finishing off with a blend. You can’t even create this effect in an image editor this quickly!

See the Pen CSS blend modes by Alvaro Felipe

Progressive Navigation by Michael Leonard

Blend modes can be used for more than just stunning image effects. Here, it’s used as a helpful microinteraction in a scroll-based navigation menu. Users can see the current chapter they’re reading based on the menu item’s color opacity. What’s more, the effect also indicates whether you’re at the beginning or end of a chapter. jQuery is a big help here as well, keeping track of scroll position.

See the Pen Progress Navigation using CSS Blend Modes by Michael Leonard

Double Trouble by Pixelsonoro

The process of multiple exposure photography combines two images into one. The concept is used to great effect here, with a background photo being combined with an animated GIF to create something rather psychedelic. It also strengthens the urge to play some classic video games.

See the Pen double exposure using css blend modes by Pixelsonoro

Totally Rad Text by Natasha Gonzales

Combine blend modes with SVG text, and you can create some gorgeous effects. In this example, two layers of text are created. One has a fill color, the other an outline. They are then positioned offset from each other, leading to this compelling and functional look. It’s even responsive.

See the Pen SVG Blended Outline &amp:Text by Natasha Gonzales

A Seamless Rainbow by Gemma Stiles

We’ll close out our collection with an example of how a little creativity can go a long way. This stunning rainbow of colors may look very complicated. However, it is actually made up of three fairly basic CSS gradients combined with a blend mode. Sometimes, simple really is better.

See the Pen CSS Blend Mode Background by Gemma Stiles

Stand out by Blending

CSS blend modes offer a nice change of pace for all sorts of design elements. While we may closely associate them with images, the examples above show some other effective uses as well. Items such as text and even navigation can benefit.

Even better is that they take a technique we’ve long seen in print design and have made it something we can easily implement on the web – no image editor required.

Take some time to experiment with CSS blend modes and see how they can enhance your next project.

The post 8 Code Snippets for Creating CSS Blend Modes appeared first on Speckyboy Design Magazine.

One area where hover effects can be especially powerful is when they’re applied to images. Whether it’s as part of a small card layout or a massive hero image, the right effect can make a huge impact.

Today, we’ll show you some creative ways that designers are integrating hover effects into images. They’ll demonstrate how we can spice up our own projects in a dramatic fashion.

Photo Effects on Hover by Alvaro Montoro

This clever use of CSS and JS duplicates the image and layers them on top of each other. From there, CSS filters are separately added to each image. This technique results in cinematic-quality effects that would be otherwise difficult to achieve.

See the Pen Photo effects on hover using JS and CSS3 by Alvaro Montoro

Fast and Powerful Image Effects by kw7oe

What’s great about this collection of hover effects is that they provide instant gratification. But that speed doesn’t take away their potency. Of particular note here are the CSS3 filter effects, as they bring sepia and grayscale images to full color upon hovering.

See the Pen Image Hover Effects by kw7oe

Image Hover with Slide Out Title by LittleSnippets

This combination of skewed caption containers, sharp typography, and quick animation is powerful. It’s also reminiscent of the opening credits to a TV show. Amazingly, the vast majority of the work is done by CSS alone.

See the Pen #1104 – Image hover with slide out title by LittleSnippets.net

Show Your Cards Image Effects by Bruno Rodrigues

Here’s a snippet that brings to mind someone unfolding a hand of playing cards for all to see. But in this case, it seems like it would be a perfect hover effect to implement for photo galleries. It not only looks cool, but it also provides some context for users.

See the Pen Image Hover Effect – CSS3 by Bruno Rodrigues

Shifting Reality Image Hover Effects by Dimitra Vasilopoulou

Go ahead, play around with this example and see if you can keep your vision straight. As you hover over various parts of this building, blocks shift and scroll based on your cursor direction. It’s highly detailed, confusing, and mind-blowing all at once. Can we do it again?

See the Pen Image Hover Effect by Dimitra Vasilopoulou

Split Image Hover Effects by Dimitra Vasilopoulou

Want more mind-blowing fun? Here’s another example from Dimitra Vasilopoulou, who also created the reality-shifter above. Here, the photograph appears to be split up within a grid layout. Hovering quickly puts it all back together. While it’s not quite as psychedelic, it’s no less impressive.

See the Pen Split Image | Hover Effect by Dimitra Vasilopoulou

Pure Class Image Effect with Pure CSS by Mahesh Ambure

This collection of hover effects proves that you don’t need to be over-the-top to make a strong impression. There are various style options here, but each brings the reveal text content and filters upon hovering. And, not a single line of JavaScript was used.

See the Pen Awesome Image Hover in Pure CSS by MAHESH AMBURE

Key(frames) to the Wild by Vail Joy

We’ve come to the intersection of drama and beauty with this incredible CSS “shutter” effect. Hovering over these sepia-toned animal illustrations creates an ultra-smooth transition to full-color. It was accomplished via CSS filters, keyframes, pseudo-elements, and opacity changes.

See the Pen Animation @keyframes in Image Hovers by Vail Joy

The Bigger Picture Image Hover Gallery by Shaw

Photo galleries are so widespread, yet you don’t see many that are truly unique. Here is a stunning exception. Hover over a thumbnail image in the grid, and a full-sized version takes over the entire container. But that’s only half of the story. The real cool factor comes from the image “splitting” itself and being put back together as it loads in.

See the Pen Splitting:Image Hover Gallery by Shaw

Split Image Reveal Effect by Mark Mead

Here we have a fun technique for revealing text behind an image. This snippet shows various ways to “split” an image into strips, thus clearing the way for a secret message. Since it’s a bit complicated, it may not be something you’d want to use repeatedly on a page. But, with the right implementation, you’ll add a creative flair to your project.

See the Pen Fancy Image Splitting (SplittingJS) by Mark Mead

We Have the Drama

Adding dramatic hover effects to your site is a great way to grab a user’s attention. What the examples above show is that we can achieve the desired results without going overboard. You don’t need something loud and obnoxious in the least. Rather, it’s all about smooth transitions and compelling special effects.

Let these examples inspire you. Then, experiment with ways to add some drama to your own images.

The post 10 CSS & JavaScript Snippets for Creating Advanced Image Hover Effects appeared first on Speckyboy Design Magazine.

That’s great for adding some basic effects to your text and containers. But it’s also possible to go above and beyond. With CSS, you can create some seriously impressive shadows that rival those found in tools like Photoshop.

These effects help elements stand out while providing depth and visual perspective. It’s amazing what a little bit of shadowing can do for a design.

We scoured CodePen to find prime examples of CSS shadow effects in action. Here are some top snippets that cover both everyday sensibility and jaw-dropping complexity.

The post 8 CSS Snippets That Demonstrate the Power of Shadow Effects appeared first on Speckyboy Design Magazine.

They not only look great, but they can also save you time by not having to open up images to apply effects individually. We look at some of the best resources to help you learn and implement CSS Image Filters into your next project.

You may also like these toolboxes: Flexbox, CSS Animation, SVG Workflow Tools, Styleguide Tools, or Tools for Formatting CSS.

CSS Image Filter Libraries

filters.css

Built with SCSS, filter.css is a tiny CSS only library for applying color filters to images and other areas of your site.

CSSGram By Una Kravets

CSSGram aims to recreate Instagram’s popular filters on the web. Simply upload the library to your site and use the special class names via either CSS or SASS.

colofilter.css By Lucas Bonomi

Add some colorful "DuoTone" effects to your site with colofilter.css. The effects are beautiful but not compatible with Microsoft browsers just yet (Safari has partial support).

CSSCO By Lauren Waller

CSSCO is a library of attractive photographic filters that can be easily added to your site. MS browsers and Safari are partially supported.

CSS Filter Web-Based Generators

cssFilters.co By Indrashish Ghosh

cssFilters.co lets you upload an image, tweak various filters and output CSS code using a lovely interface.

Filter Blend By Ilya Shubin

Upload your image to Filter Blend and apply a variety of background colors, blend modes and CSS filters. It’s almost like you don’t need Photoshop anymore!

CSSReflex Filter Effects By Naeem Noor

CSSReflex Filter Effects lets you see just what each CSS filter can do. Use the sliders under each effect and see the results.

CSS Filter By Jordano Aragão

Tweak various filters to your heart’s content and export some CSS for use on your site with this pen.

CSS Image Filters & jQuery

tiltShift.js By Noel Tock

tiltShift.js mimics the popular tilt-shift effect using jQuery and CSS 3 filters.

Philter By Liudas Dzisevicius

Philter uses HTML attributes to enable CSS filters, including hover effects.

Image Editor with CSS Filters & jQuery By SitePoint

Paste in an image link and start filtering with Image Editor with CSS Filters and jQuery.

Additional CSS Filter Tools

Postcss Instagram By Azat S.

Meant for use with PostCSS, Postcss Instagram is a plugin that adds Instagram-like filters to images.

SassyFilters By Pascal Duez

Using SASS? SassyFilters is a collection of cross-browser configurable CSS-SVG filters .

CSS Filters DevTools Extension By Jaume Sanchez

If you’re using Chrome DevTools, the CSS Filters DevTools Extension will add a sidebar to the elements panel that allows you to easily edit filters.

CSS Image Filters Learning Guides

Understanding CSS Filter Effects By Alex Danilo

This is an article from a few years ago, but still holds a lot of relevant information about filters. Author Alex Danilo goes especially in-depth with regards to potential performance issues.

Image Adjustment with CSS Filter Effects By Thoriq Firdaus

Image Adjustment with CSS Filter Effects provides a rundown of select CSS Image Filters along with some downloadable source code to get you started.

As it turns out, adding CSS Image Filters to your site is a straightforward process. An interesting aspect for designers and developers is that you can set up filters in your CSS, and when clients add images to their site, they are automatically filtered.

This means less time spent training for you and more convenience for your clients. With the variety of filters and tools that make implementation a piece of cake, there’s no reason not to experiment.

The post 15 CSS Image Filter Libraries & Web-Based Tools appeared first on Speckyboy Design Magazine.

And who doesn’t like it? The :hover selector allows you to make your website an informative and comfortable place for users. If you embrace its powers, you can easily:

• Give extra emphasis to specific elements by singling them out from the content flow;
• Display hints to clear up possible confusion;
• Enrich static content with exciting twists;
• Enhance the storytelling;
• Create a playground in the hero area, etc.

There are many ways to benefit from it. However, what has caught our attention recently is that developers are giving the banal, boring link hover effect a new life. The trick lies in using large images. While it may seem a bit outrageous at first sight, somehow they managed to make this approach look elegant, visually-interesting, captivating and bold.

Let’s take a look at some compelling examples of the effect in action.

Subsense

Subsense is a typical representative of this tiny, refreshing trend. The homepage of the Italian digital agency makes the most out of the minimalistic approach. The layout is conventional, whereas the graphical filling is scarce as ever. You’ll find here just several blocks of text, navigation and a ton of airy whitespace. However, the website is not boring.

On the contrary, it looks exciting and fresh. It welcomes online visitors with a list of works that occupy the lion’s share of the screen. Each name of a project is accompanied by a corresponding image that appears upon hovering. It is enormously big, so you will not miss it.

Note, the team focuses attention on their portfolio, making it the star of the show. And with all of that, they do not reinvent the wheel or use any modern animations. Everything is neat, clean, and just brilliant.

Mine Studio

The portfolio of Mine Studio is another characteristic example of how to employ the trend. While, at the same time, it demonstrates how the effect can be used to make minimalism work for you.

Here, the front page is almost deprived of content and visuals. It is just a single screen presentation; nevertheless, it serves its purpose perfectly well. The hero area is occupied by a text-based horizontal slider that has three levels. Each one features the titles of the previous works. When you hover the mouse cursor over the name, an image emerges. Even though it does not stretch from top to bottom like in the case of Subsense, it is certainly attention-grabbing.

Note two things here. First, each appearance of a picture is enriched with the popular ripple-styled transition effect that makes it look stylish and modern. Secondly, the name changes its color, adding extra focus to the selected element.

Even though the team maintains a plain look, the hero area does not feel simple. On the contrary, it feels top-notch.

Ada Sokol

The team behind the portfolio of Ada Sokol adopts the same approach.

This is another one-screen homepage in our collection. It is also spacious and very conservative with the content. There is only regular navigation. The favorite works are showcased as links. And, it is here where the magic happens.

The hover state triggers not just an appearance of the image but also a small trick with its display. The image does not just move around the space; it becomes distorted and leaves a trace of disfigured graphics. It is an unusual, yet winning way to draw attention towards the portfolio pieces as well as meet the current tendencies.

Nicolas Lanthemann / VLNC Studio

There are some more interesting examples where the image-based hovers are skillfully combined with motion tricks. Consider Nicolas Lanthemann and VLNC Studio.

In the case of Nicolas Lanthemann, the image does not just appear – it moves and swirls, grabbing your attention. Whereas the creative agency of VLNC has used the trendy technique in tandem with the mouse cursor. So, wherever the mouse travels, the picture follows it leaving a faded trace.

Language Keepers

If you think that this new trend affects only the hero areas, then you may be surprised that it can be found everywhere. Just look at Language Keepers.

The team that stands behind Language Keepers’ web design leverages this technique for improving the main menu. Much like in majority websites of these days, the navigation is hidden behind the hamburger button. When it is open, it takes up the entire screen. The menu is split into two columns.

Each link is followed by an image that says it all. So, whatever navigation item you target, you will get not just a short description at the bottom of the page, but also a visual aid.

Corphes

The team behind Corphes derives benefits from this solution in several places on the website. First, they have given the regular wheel-based list in the navigation a zest. Here, each link looks bold and informative.

Secondly, they have improved the exploration of the main content on the landing page. Thus, one of the sections includes blocks of text that are supported by images that show up upon hovering.

Conscious Hotels

Here you will find the trend used in the middle of the homepage. It is an old technique, yet the team has managed to twist it a little bit to save it from looking ordinary.

At first, you stumble upon the blank sections where the titles are masked to hint that there is something hidden inside. In this way, the team ignites visitors’ interest. After you hover the cursor over the box, the image reveals itself, supporting the title and its message. Simple, yet elegant.

Lecomte de Bregeot

Last, but not least in our collection is Lecomte de Bregeot. The key feature of this take on the trend is that the team employs videos instead of pictures, thereby extending the boundaries and showing us that we can use a different type of visual material.

Big Images, Big Impact

It is so exciting to see how creatives transform the time-tested and dull elements of the web interface into an extravaganza. Simple hover effects that usually play a supporting role for links now have the leading role these days. It proves once again that there is still room for experiments and enhancements.

The post Using Images to Enhance the CSS Hover Effect appeared first on Speckyboy Design Magazine.

These time-saving CSS libraries, frameworks, and tools have been built to make our lives that little bit easier and also offer a learning window into those CSS areas we may not fully understand.

In this collection you will find 50 of our favorite CSS libraries, frameworks, resources and tools that have all been released this year. No doubt, you’ll find something useful!

CSS Libraries

filters.css – A tiny CSS library for applying color filters to images and more.

Seasonal.css – A CSS framework that displays a seasonal color scheme based on the date.

Checka11y.css – Utilize this stylesheet to quickly detect some common accessibility issues.

Knopf.css – A modern, modular, extensible CSS button system.

grxdients – A CSS library that makes adding gradients to your projects incredibly simple.

LaTeX.css – A minimal, almost class-less CSS library which makes any website look like a LaTeX document.

CUBE CSS – A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism. At least, that’s what they say.

pattern.css – A CSS-only library for adding background patterns to your projects.

98.css – Missing the good old days of computing? Use this design system to recreate those classic UIs.

Cooltipz.css – A library for adding pure CSS tooltips to existing HTML elements.

MVP.css – A minimalist stylesheet for HTML elements.

MoreToggles.css – A pure CSS library that provides you with stylish toggles.

Fluiditype – A small CSS library that focuses on pure fluidity in type across all screen sizes.

CSS Frameworks

Cirrus.CSS – A component and utility centric SCSS framework designed for rapid prototyping.

OrbitCSS – Check out this modern CSS framework based on flexbox.

Halfmoon – A front-end framework with a built-in dark mode and full customizability using CSS variables.

mono/color – A small, responsive, dual-themed CSS-only framework.

new.css – A classless CSS framework for building HTML-only websites.

Honeycomb – A configurable, mobile first, fluid SCSS framework for your web projects.

Shorthand – A free and open-source CSS framework that allows you to make unique and modern designs without writing any CSS.

Griddle – A modern CSS framework built with CSS Grid and Flexbox.

Flash Grid – A new lightweight (1KB minified and gzipped) grid system based on CSS Grid Layout.

Web-Based CSS Tools & Generators

The good line-height – Use this tool to easily calculate the perfect CSS line height for each text size in your scale.

CSS Spider – This Chrome extension is billed as the quickest and most convenient way to copy, visualize, edit and export CSS.

Layoutit Grid – Build your ideal CSS Grid with this online tool.

Beautiful CSS box-shadow examples – Choose from this collection of 80+ copy & paste shadow styles.

zerodivs.com – Try this experimental UI editor for creating illustrations based applying styles (CSS) on a single HTML element.

CSS Effects – A collection of click-to-copy CSS special effects.

Capsize – An online tool for defining typography in CSS.

CSS Background Patterns – Generate your own seamless background pattern.

Animated CSS Background Generator – Make your own mind-blowing animated background with this tool.

Keyframes.app – Generate awesome CSS animations with this web-based tool.

Gradihunt – Find or generate the perfect CSS gradient for your projects.

CSS Section Separator Generator – Use this tool to create unique separator shapes with pure CSS.

Parametric Color Mixer – Create your own custom color palette and export to CSS or SVG.

Neumorphism.io – A tool for creating Soft-UI CSS code.

700+ CSS Icons – A collection of free icons available in CSS, SVG and other popular formats.

Indie Icons – A collection of icons you can copy-and-paste into CSS, HTML and Illustrator.

Useful CSS Cheatsheets

Grid Cheatsheet – A handy reference for learning the intricacies of CSS Grid.

BEM Cheat Sheet – Use this guide to boost your CSS class naming skills.

A list of 300+ CSS properties – A helpful list of CSS properties that are supported by browsers.

Visualizing CSS Resets – Use this helpful infographic to better understand what CSS resets do.

Selectors Explained – Translate CSS selectors into plain English.

Useful CSS Items

What Does 100% Mean in CSS?

CSS Breakpoints Used by Popular CSS Frameworks – Confused about which CSS breakpoints to implement? Check out what the biggest frameworks are utilizing for inspiration.

Learn Z-Index Using a Visualization Tool – CSS z-index can be hard to grasp. This visual guide can help you get the hang of it.

Color Theme Switcher – Learn how to add multiple color schemes to your website via CSS.

The CSS Cascade – Learn how web browsers resolve competing CSS styles.

What’s Missing From CSS? – A random look at responses to the annual CSS survey. See anything you agree with?

Favorites from Previous Years

• Our Favorite CSS Libraries, Frameworks and Tools from 2019
• Our Favorite CSS Libraries, Frameworks and Tools from 2018
• Our Favorite CSS Libraries, Frameworks and Tools from 2017
• Our Favorite CSS Libraries, Frameworks and Tools from 2016
• Our Favorite CSS Libraries, Frameworks and Tools from 2015
• Our Favorite CSS Libraries, Frameworks and Tools from 2014
• Our Favorite CSS Libraries, Frameworks and Tools from 2013

The post Our 50 Favorite CSS Libraries, Frameworks and Tools from 2020 appeared first on Speckyboy Design Magazine.