background preloader

CSS effect

Facebook Twitter

Border-radius. You can give any element "rounded corners" by applying a border-radius through CSS.

border-radius

You'll only notice if there is a color change involved. For instance, if the element has a background-color or border that is different than the element it's over. Simple examples: For the best possible browser support, you should prefix with -webkit- and -moz-: Notice the order of those properties: the vendor prefixes are listed first and the non-prefixed "spec" version is listed last. It's pretty realistic these days to drop prefixes and just use border-radius, as discussed here.

If the element has an image background, it will be clipped at the rounded corner naturally: Sometimes you can see a background-color "leak" outside of a border when border-radius is present. With just one value, border-radius will the same on all four corners of an element. You can also specify two or three values. If one value is set, this radius applies to all 4 corners. Working with Shapes in Web Design. By Robin Rendle On When we make a new component on a website, we’re effectively creating rectangles of different sizes, whether we realise it or not.

Working with Shapes in Web Design

But what happens if we want to experiment a little? How many different ways are there to make shapes? In this post I want to roughly outline some of the most common ways to make circles, triangles, and polygons, as well jot down the advantages and disadvantages for these methods so we can experiment with those that might be a little unfamiliar to us. How to Quickly Create Shapes in Pure CSS. In today’s tutorial, let’s create a simple list of the most common shapes that can be created using CSS3.

How to Quickly Create Shapes in Pure CSS

We will make progress through the article and at the end, you will learn how to create something truly great. This tutorial will give you an insight into CSS3 Shapes and how to create them on your own. It covers multiple shapes that can really speed up your site, as the need for images will reduce. Html - Invert CSS font-color depending on background-color. Midnight.js - Switch fixed headers on the fly. Kennethcachia/background-check. GitHub - jamiebrittain/colourBrightness.js: A lightweight and easy-to-use jQuery plugin that determines if the background colour of an element is light or dark. Filter. CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser).

filter

The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border. The syntax is: Where blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url() - for applying SVG filterscustom() - "coming soon" Multiple functions can be used, space separated. Example of a single filter being used: Example of multiple filters being used: Filter Functions To use the CSS filter property, you specify a value for one of the following functions listed above. 10 Easy Image Hover Effects You Can Copy and Paste. Sneak Peek Before we get started, take a look at the demo below to see all of the various hover effects that we’ll be building.

10 Easy Image Hover Effects You Can Copy and Paste

Demo: Click here to launch. Setup Before we begin creating the individual demos, some basic setup is required. Here’s a chunk of CSS that we’ll be using to dictate the basic appearance of all of the examples. Most of this is basic stuff: box-sizing allows us to manipulate the box model (feel free to apply more specifically if you don’t like the universal selector), and the pic class gives us a place to toss in some generic styling for each photo. Zoom and Pan Our first group of effects involves utilizing some tricks with hidden overflow. CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15. 自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15

リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいという時に使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも以下のようなHTMLを使用しており、CSSについても以下を共通スタイルとして指定しています。 CSSでは幅や高さを指定している部分もありますので、参考にされる際はこれらを自身の環境に合わせて調整してください。 また、動きの紹介にはそれぞれアニメーションGIFを使用しているので、実際の動きや表示は以下デモページで確認できます。 ※以下で紹介する方法はブラウザによっては表示確認ができない場合や綺麗に表示されない場合がありますので、実際の動きを確認する際はChromeやFirefoxでご覧ください。 ※デモページの確認はPCでご覧ください。 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 目次 1. ホバー時に画像が拡大するエフェクトを付けたもので、実装にはCSSを以下のように記述します。 拡大率を変更したい時にはscaleの値、スピードなどを変更したい時にはtransitionの値をそれぞれ任意のものに変更してください。 実際の動きは以下で確認できます。 目次へ 2. Bootstrap Hover Image Gallery. Image Overlay Hover Effects With CSS3 Transitions. Get SourceView Demo Image overlay hover effects with CSS3 transitions are a great way to add some nice interactivity on your site.

Image Overlay Hover Effects With CSS3 Transitions

In the old days, a little pointer cursor would do the trick for indicating to the user that an image was clickable to view more information. Nowadays, we want some smooth transitions and some UI icons to prompt the user. In our case, we’re going to have a series of images. When the user hovers over an image, a semi-transparent black background transitions in over the image, along with a “+” icon. Diving In For the tutorial post, I’m only going to explain and go through one overlay hover effect. Notes About The HTML The markup is straightforward. Instead of using the CSS pseudo class :hover, we’re going to check it with JavaScript/jQuery and Modernizr. In the case of touch devices, we want to give the user the option of hiding the overlay. Articles by Samuel Norton.