10 Easy Image Hover Effects You Can Copy and Paste Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code. Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action. 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. Demo: Click here to launch. Setup Before we begin creating the individual demos, some basic setup is required. 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. Grow Shrink Side Pan Vertical Pan Fun with Transforms Tilt Morph
Slopy Elements with CSS3 It's always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. Inspired by many superb designs that use non-straight elements, I want to show you some simple examples and ways how to create slopy, skewed elements with CSS only. View demo Download source It’s always a delight to see some non-straight elements in web design. So, let’s begin! Example 1 In our first example, we want to have a pretty normal layout with a little twist: we want a diagonal separation between the elements. The Markup Let’s create a section for our whole content and inside we’ll add some divisions with the class se-slope. Now, let’s check our the style. The CSS The body will have the same background color like all the even se-slope elements, which is pink. The divisions will all be rotated: the odd ones will be black and rotated 5 degrees and the even ones will be pink and rotated -5 degrees. Example 2
A month after switching to Macs - cd ~/jaequery The story For most of my life, I had a deep resentment toward Macs. I always never liked their concept of trying to do something different. Anyhow, I’ve grown accustomed to PCs very much. Tried Macs (several times) But because I also enjoy trying out new and shiny things, time and time I’d buy a Mac, try it out, and find myself totally weirded out by it. My PC broke hardcore Then one day, my awesome PC just died. Powering on the dusty old Mac Since I had no other choice, I powered up my Macbook Air for me to continue working. As I was on a strict deadline at work, I decided I’ll just have to use Mac for now and deal with PC later. So here are what I just didn’t like about Macs: No easy way to maximize window and full screen mode weirded me out. Since I just could not live without these, I looked hard online to see if there was anything remotely even close to how it was on PCs. I love Macs now Mac’s apps are just so much better and nicer. One big caveat about Macbook Air App recommendations
Creating Custom Form Checkboxes and Radio Buttons with Just CSS! In CSS we have many ways to style things in any way we want. When it gets to forms though, things get a little complicated. Text inputs are easy, but checkboxes and radio buttons are very difficult to style with CSS. In this tutorial I’ll show you exactly how to style these inputs and make awesome forms with just CSS! Effectively, a really good idea for styling checkboxes the only way to style checkboxes, radio buttons and drop downs is with this little piece of CSS: appearance: none; This will take all browser styles off those inputs and we can start to alter them as regular elements. It’s okay though! What we can use So what weapons can we use to create these effects? Recently there has been a bit of discussion on the web about :before and :after when using forms. To get started, lets make a few checkboxes and radio buttons. The next step is some CSS. After that we set the styles for when the user clicks on the checkbox (:active) and when the checkbox is checked. And we’re done! Update!
Pretty Hover Effects Pretty Hover Effects with CSS and jQuery Demo: Hover your cursor in each image below. Note that if you're using IE - you're not seeing the rest of the styles due to lack of CSS3 property support. Autumn Leaves Cloudy Skies Nice Horsy Grassy Meadows Jigsaw Pieces Retro GrooveBack to Tutorial Filter Functionality with CSS3 Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type. View demo Download source The idea is inspired by Roman Komarov’s brilliant “Filtering elements without JS” experiment where he uses checkboxes and radio buttons for filtering colored shapes. The beautiful Dribbble shots used in the demos are by Mike from Creative Mints. The Markup Let’s start with the markup. The unordered list will contain all the portfolio items as anchors with an image and a span. The CSS We’ll be going through three example effects, but first, let’s take a look at the common style. I will omit all the vendor prefixes, but you will, of course, find them in the files. The main section container will have a specific width: Let’s move on to the item list: Example 1 Example 2
Charm: Cure Customer Support Fatigue Charm gives you back that lovin’ feelin’ (whoa-oh oh) You didn’t ever want to hate hearing from your customers. You wanted to do it better. And yet you find yourself avoiding (and cursing at) your support inbox. It’s full of email bombs: innocent-looking emails that hide a lot of work & obligation & delay. Emails you read & Mark As Unread-ed because you weren’t sure how to solve that problem right then. It’s incredibly frustrating when you read an email, can’t fix it or solve it right away, and so you feel like you can’t reply because if you do, the email will leave the inbox (without a lot of effort to bring it back). When all you see are emails to “remind” you, you have to waste precious cycles remembering remind you of WHAT? Your inbox is full of festering, murky, potentially explosive little bombs. Is it any wonder you don’t want to look at it? Your support process is a source of friction & stress for you & your team. And hey, if you can’t handle the bomb, what are you forced to do?
3d animation using pure CSS3 Here's an example of pretty powerful CSS3 animation and 3d effects. Using the perspective, transform and transition properties, we can create a 3d animation effect. Simply hover over the movie posters below to see the effect in it's full glory. Just make sure you're running the latest version of a -webkit based browser (Apple Safari or Google Chrome) to see the effect. Iron Man 2With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...More info The Last AirbenderThe story follows the adventures of Aang, a young successor to a long line of Avatars, who must put his...More info Tron LegacySam Flynn, the tech-savvy 27-year-old son of Kevin Flynn, looks into his father's disappearance and finds...More info
Awesome Overlays with CSS3's Border-Image Property - ZURB Playground - ZURB.com What's the big deal? These overlays use a number of new CSS properties, some of which are simple like border-radius and using RGBa colors. The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS. How to use border-image The border-image property is tricky in the way it takes a single image and turns it into a complete object border for any sized element. What can potentially screw things up is that it takes the center section and stretches it across your entire object. This is a sketch of how the browser cuts up your image into the border-image elements... ...and this is the image we're using (enlarged), and how each piece becomes an edge to our overlay object. The rest of the syntax The first part of the syntax is simply the path to the image you'll be using. url(/images/awesome-overlays/border-image.png) 5 5 5 5 stretch;
On SSL In this article you will find useful information about SSL, Certificates Chaining and the best tricks about defeating SSL (with SSL Sniff, SSL Strip, BEAST, THC-SSL-DOS). What Is SSL and how does it work? When people think about certificates, they usually think about certificates coming in pairs. Actually instead of just 2 certificates, there could be more. You can have a certificate chain as there are no standard that says how many the maximum is. Let’s see how we verify them: -Verify that the name of the leaf is the same as the site you’re connecting to -Verify that the leaf certificate has not expired -Check the signature -If the signing CA’s is in our list of trusted root CA’s, STOP. Figure2 So we can observe the verification is made using a simple recursive function, focused on signature validation. The results of a naive attempt at validation is a chain that is complete and nothing more. Let’s say we have this scenario: Figure3 What will stop me of doing this ? Figure4 -Nothings has expired; .
Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, please read the FAQ. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. License Hover.css is open source, and made available under a MIT License. Placing author information in your stylesheet, credits page or humans.txt is much appreciated. Hover.css is now available as an Eager App Quickly and easily install Hover.css on your WordPress site or via an embed code with Eager app.