How to Customize Browser Scrollbars Using CSS We`re all using web browsers to navigate on internet. Most of you(to be more specific, 65% according to my analytics) are using Chrome and Safari to navigate through this website. These 2 browsers have something in common: they are both built on the WebKit platform, or in other words, they are WebKit browsers. Did you know that you can customize the way a scrollbar looks? Customizing scrollbars is easy, being based on a pure CSS solution, but there`s a glitch: custom scrollbars works only for WebKit browsers. Let`s write some code: As you noticed already, each element has the custom prefix ::-webkit-.
transform-function Syntax The <transform-function> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D. Matrix transformation matrix() Describes a homogeneous 2D transformation matrix. matrix3d() Describes a 3D transformation as a 4×4 homogeneous matrix. Perspective perspective() Sets the distance between the user and the z=0 plane. Rotation rotate() Rotates an element around a fixed point on the 2D plane. rotate3d() Rotates an element around a fixed axis in 3D space. rotateX() Rotates an element around the horizontal axis. rotateY() Rotates an element around the vertical axis. rotateZ() Rotates an element around the z-axis. Scaling (resizing) scale() Scales an element up or down on the 2D plane. scale3d() Scales an element up or down in 3D space. scaleX() Scales an element up or down horizontally. scaleY() Scales an element up or down vertically. scaleZ() Scales an element up or down along the z-axis. Skewing (distortion) skew() skewX() skewY()
Performance & Organization - An Advanced Guide to HTML & CSS Having the ability to write HTML and CSS with a solid understanding is a great expertise to have. As a website’s code base and traffic grows, a new skill set comes into play, one that is extremely important to both development time and user experience. Knowing the fundamentals of website performance and organization can go a long way. The organization and architecture of a code base can greatly affect not only the speed of development, but also the speed at which pages render. Both of which can be sizeable concerns not only for developers but also users. Additionally, taking a few small steps to improve the performance of a website can pay off in dividends. Strategy & Structure The first part to improving a website’s performance and organization revolves around identifying a good strategy and structure for developing the code base. Style Architecture The architecture outlined above includes three directories, all with individual groups of styles. Object Oriented CSS Choosing a Methodology
CSS drop-shadows without images Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique. The basic technique There is no need for extra markup, the effect can be applied to a single element. The pseudo-elements need to be positioned and given explicit or implicit dimensions. The next step is to add a CSS3 box-shadow and apply CSS3 transforms. One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction.
Code a Spinning Circular Menu With CSS Don’t be a square, break outside your boring box and try on a circle for size. Today we’re going to build a circular navigation menu that spins to different points as the user hovers over an anchor. Along the way we’ll have to overcome several obstacles like how to structure our HTML to be conducive to a remote hover and how to position all of the elements just right so that everything works. Launch Demo – Download Files Step 1: Structural HTML Before we write a single character of HTML, we have to figure out the structure of what it is that we’re building. Basically, each of the rectangles at the top are tied to one of the four little circles inside of the big circle. Every time I try to pull off a remote hover, it takes me a few tries to get the structure just right. Let’s say that we put this structure into place with the idea that we wanted a hover over the anchor to change the color of the paragraph. As it turns out, this simply doesn’t work. So what do we do? Application Take a Look!
All About Cubic Bezier Curves & Transitions In the last post, we looked at the basics of CSS transitions, including how to use easing to control how your animation flows. In this post, I want to look deeper at a very powerful easing feature; cubic bezier curves. In short, they let you define exactly what path your animation will take, and thanks to some awesome community tools, they are extremely easy to use (No maths required at all). This gives you total flexibility with your transitions. One of the best tools is the free Cubic-Bezier.com by Lea Verou. It lets you make new curves and see them in action just by dragging the handles. The syntax is simple too. The linear part is actually a shortcut though. For now, you could rewrite that line to use the cubic-bezier function and get the exact same animation: That one line can now be used in any transition, and to tweak the animation, all you need to do is change those 4 bracketed values. What Is This Graph? Let’s take a look at the linear graph, and see what it means. The Ease Graph
Perform a Split Reveal With CSS CSS can pull of a lot of really great image tricks: size manipulation, desaturation, even blur. One limitation that we run into though is that you can’t really slice an image into multiple parts. For instance, if you wanted to cut a photo in half and animate the separation, you couldn’t really do it with pure CSS. Today we’re going to code up a work around that allows us to achieve this very trick without an ounce of JavaScript or extra files. Sneak Peak: Launch Demo Hat Tip to Kyle Foster Recently, developer Kyle Foster created a nice little jQuery plugin with an effect that I really like (shown here). As you can see, it’s a great little piece of UI. Step 1: Format Your Image CSS allows us to apply multiple background images to a single element. The trick to pulling this off is to split your image in half in Photoshop before you embed it. The workflow to do this goes like this (feel free to tweak the dimensions): Step 2. This div has two classes: reveal and plug. Step 3. Step 4. Step 5.
Create an Animated Share Menu With CSS Sharing is an integral part of the web experience and designers are always looking for new and interesting ways to highlight or show off the sharing portion of their pages. Today, we’re going to build a simple sharing menu that integrates an icon font as well as some animations. The final product is inspired by Disqus, but has a unique twist of its own. Let’s jump in and see how it works. Check out the Final Demo: Click here Disqus Share Menu The idea for today’s tutorial comes from the Disqus comment menu that you see at the bottom of this and every other Design Shack article. Step 1. For this menu, we’ll need at least three social sharing icons. After some searching, I found Socialico from FontFabric, which is free, has tons of icons and is licensed for embedding on websites. Now, to make sure that we have maximum compatibility for embedding this font into our page, let’s head over to FontSquirrel. So far so good! Step 1. Now it’s time to mark up this sucker. That’s it! Step 2. Step 3.