CSS Buttons with Pseudo-elements
In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS.
CSS3 with jQuery / Reverse Animation
Hello guys, this time I wanted to bump into another interesting experiment, create a reverse animation. I helped with jQuery to assign the specific class at the click of the button. In my opinion an interesting experiment, I hope you will like and find alternative paths in the realization of the same experiment with different techniques. I remember this animations are only visible in Firefox, Safari and Chrome.
Wicked CSS3 3d bar chart
While browsing the web, I came across a pretty cool 3d bar chart created with Flash. I was wondering if I could recreate the same neat effect using pure CSS3 and started working on this wicked CSS3 3d bar chart. Check out the example to see that (almost) no images were used to create this wicked effect.
Lateral On-Scroll Sliding with jQuery
After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. We will also add the opti
Animated Web Banners With CSS3
Today we’re going to take a look at spicing up our web banners, ads or any content for that matter, with CSS3 animations.
Firefox and WebKit browsers are currently the only browsers that support CSS animation, but we’ll take a look at how we can easily make these ads also function in other browsers (which I’ll affectionately refer to as 18th century browsers). However, don’t expect perfect support for all browsers (specifically IE 7 and lower) when experimenting with modern CSS techniques.
An Introduction To Object Oriented CSS (OOCSS)
Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. It’s a fairly overused but true statement about what draws visitors to a site.
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.
CSS3 Graph Animation
Hi guys, today I present a small experiment, using once again the CSS3 animations and properties. This time we will build to create a chart, for me this is just an experiment to test the CSS3, I do not think you can use in your projects but you can enhance your knowledge. I remember this animations are only visible in Firefox, Safari and Chrome.
Practical CSS3 tables with rounded corners
Sliding Image Panels with CSS3
Today we’ll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We’ll use radio buttons with labels and target the respective panels with the general sibling selector.
A clean calendar in CSS3 & jQuery
Almost a year ago I had the idea to build a calendar app. The project was called LiveCal and was supposed to become a platform where you could share calendars. The whole idea was that calendars would become something you subscribe to. Let me clarify. Let’s say you are subscribed to the calendar stream of your school. One of your teachers plans an event, such as a task or a test and adds it to the calendar stream. From the moment the event is added to the stream, you’ll get a instant notification that a new event is being planned. This means you’ll always walk around with an updated calendar. Due to the complexity of the idea and the lack of knowledge on my side this project never really took off.
CSS3 Loading Animation Loop
Hi folks, this time we’re going to see and create three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery. I remember this animations are only visible in Firefox, Safari and Chrome.
Speech Bubble Arrows that Inherit Parent Color
Page Transitions with CSS3
In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic.
How to create slick effects with CSS3 box-shadow
Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending options. But now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.
Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore.
Accordion with CSS3
Using hidden inputs and labels, we will create a CSS-only accordion that will animate the content areas on opening and closing.
Today we’ll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, we will create an accordion that will animate the content areas on opening and closing.
There are many variations of CSS-only accordions around, most of which are implemented using the :target pseudo-class. The problem with using :target is that we can’t really close the content areas again or have multiple sections open at the same time. By using hidden checkboxes, we can control the opening and closing. Alternatively, we can also use radio buttons if only one section should be open at a time.
CSS3 Skill Bar Animation
Hello guys, i was recently thinking about a redesign of my website and i got the idea to make this pretty simple tutorial where we will build the skill animation bar for your about page. I remember this animations are only visible in Firefox, Safari and Chrome.
Thumbnail Proximity Effect with jQuery and CSS3
Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.
Create a CSS3 Image Gallery with a 3D Lightbox Animation
Fullscreen Background Image Slideshow with CSS3
Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations.
Password strength verification with jQuery
What constitutes a strong password? Well, that depends on who you ask. However, traditional factors that contribute to a password’s strength include it’s length, complexity, and unpredictability. To ensure password strength, many sites require user passwords to be alphanumeric in addition to being a certain length.
In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish.
CSS3 Loading Animation
Hello guys, this time i wanted to create 3 simple CSS3 Loading Animations. I remember that CSS3 Loading Animations are only visible in Firefox, Safari and Chrome.
CSS3 Lightbox
Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way.
jQuery Clean and Simple Tooltips: gips
This is an eye-opener for web designers and developers. It also creates the need for a simple and usable web design that everybody can understand. Obviously no product or website/web application (for that matter) can be so intuitive that everybody can use it. This is like a product that sells itself which is improbable. There is always need to improve design and add elements that make it easy for users to understand and use the website/web application. This is where the concept of ‘instructional design’ comes in. The art of instructional design tells us techniques for producing what users actually want – simple and usable products.
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.
CSS3 Menu Navigation Effect
Hi guys been a long time since i write on my blog and then i inaugurate this day with a new tutorial that will treat apply CSS3 properties to menu navigation. We are going to see how to play nice effects without the use of jQuery. I remember this tutorial works perfectly on all browsers except Internet Explorer for the first two examples, while the last example will only be visible in Firefox, Safari and Chrome because it uses the CSS3 Animation Property
Item Blur Effect with CSS3 and jQuery
Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item
CSS3 Image Styles
When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I’m going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles.
Splash and Coming Soon Page Effects with CSS3
CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. We’ll experiment with animation sequences and how to bring some life to some simple elements.
CSS3 Tooltip with Animation NO jQuery
Hi guys, this time I have wanted to create a simple tooltip with CSS3 using the animation, the effect is amazing, and the most important thing we will not use any scripts jQuery. I remember that CSS3 Animations are only visible in Firefox, Safari and Chrome, for the other browser the animations not function, but you will have always the tooltip effect, so can always be used in your projects.
Elastic Image Slideshow with Thumbnail Preview
Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.
CSS3 Loading Animation Loop 2 Set
Hi guys, I wanted to create more CSS3 animations, this time experimenting with different methods to create simple loading animation loop. I used the translate property and the cubic-bezier property. I remember this animations are only visible in Firefox, Safari and Chrome. Let’s see this new experiment!
Animated Buttons with CSS3
Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.
courtesy:http://www.designyourway.net/blog/resources/new-css-and-jquery-tutorials-for-newbie-web-designers-and-not-only/
0 comments:
Post a Comment