We all know about WebGL, it’s an open standard browser implementation of OpenGL, and you can create 3D games, effect with Javascript. Now, we have a new way to create 3D graphic – by using CSS. I found this very impressive tool called Tridiv, a web-based editor for creating 3D shapes in CSS. If you… Continue reading Create Pure CSS 3D Model With Tridiv
Tag: CSS
Sliding Horizontal Layout
Today we’d like to share an interesting layout with you. You might have seen it already on Skybox or on the website of Lotta Nieminen. It’s a layout where we see the main section in the middle and part of the previous and next section on the sides. The navigation reflects this view by showing… Continue reading Sliding Horizontal Layout
Using Alignment to Improve Your Designs
Alignment is one of those things that comes hand-in-hand when working with grid systems. The subject of alignment isn’t simply a matter of choosing whether or not you want to align text or images to the left or right of a design (though those decisions obviously still matter), instead, we employ alignment to improve our… Continue reading Using Alignment to Improve Your Designs
How to Establish a Modular Typographic Scale
Possibly the most obvious typographic question in the hands of a designer is “which typefaces should I use?” The second question, one which rarely gets the kind of attention it ought, is “at what sizes should I set my type?” Establishing a modular scale is the best way to determine typographic sizes, in fact, it… Continue reading How to Establish a Modular Typographic Scale
10 Digital Design Terms You Need to Know
Design jargon is everywhere. And you need to be able to speak the language. Working on digital projects has its own set of terminology. From dither to color values to fluid or fixed layouts, there are a few terms every designer needs to have a grasp of. So we’ve made it easy for you, and… Continue reading 10 Digital Design Terms You Need to Know
Detect Browser CSS Support With @supports Rule
Since browsers have their own decision of what features to include, we web developers frequently have to identify if the browser supports particular features, then we fill in the gap using Polyfills (if required). The popular way of handling this kind of situation is by using Modernizr but do you know that we can also… Continue reading Detect Browser CSS Support With @supports Rule
Beginning With WordPress: Editing the Look of Your Site With CSS
This entry is part 6 of 6 in the series Beginning With WordPress So, now that we have a child theme set up we’re ready to get make some changes to the look and feel of our site. What You’ll Need Web browser – I’m using Chrome Text editor – I’m using Text Wrangler FTP… Continue reading Beginning With WordPress: Editing the Look of Your Site With CSS
Choosing a Grid System
In the previous article, I introduced you to grid systems. With any luck, by now, you should have a good understanding of what they are and why they’re a good weapon to have in your design arsenal. Today, I’m going to explain about choosing a grid system – from creating your own, to working with… Continue reading Choosing a Grid System
21 Responsive HTML5 CSS3 Frameworks You’ll Love
Creating a Responsive Website can be daunting for most web designers, Responsive HTML5 CSS3 Frameworks is a quick and easy solution for designers. You should consider having Frameworks in your workflow to simplify your development process. These Frameworks or Boilerplates include the complicated grids, media queries and layouts ready for you to use your own design and… Continue reading 21 Responsive HTML5 CSS3 Frameworks You’ll Love
Creating the New Google Play’s Multi-Level Navigation from Scratch
Google have recently released a new Google Play website complete with a new redesign and what caught my attention was the way they implemented their navigation bar. With the smooth animation and how they let users peek at the root-level menu by simply hovering a back button, I decided to build a similar navigation menu from scratch… Continue reading Creating the New Google Play’s Multi-Level Navigation from Scratch
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 someawesome 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… Continue reading 10 Easy Image Hover Effects You Can Copy and Paste
19 Must-Have Chrome Extensions For Designers And Developers
Here, we have come up with another interesting collection of Chrome apps and this time we are focusing on 19 most essential apps for web designers and developers. Google Chrome is a powerful web browser and because of its simplicity many of us prefer it over many traditional web browsers. We have previously presented some… Continue reading 19 Must-Have Chrome Extensions For Designers And Developers
Useful Tutorials for Web Designers and Developers
In this round up I present some useful tutorials which can be very much helpful to all designers and developers. Understanding the Qualities and Characteristics of Color Creating Content Tabs with Pure CSS Creating a Modern Lightbox with CSS3 and JavaScript Making Draggable Webpage Elements using jQuery 30 Must Have Wicked Text Effect Tutorials… Continue reading Useful Tutorials for Web Designers and Developers
Showcase Of Fresh And Free jQuery Plugins And Tutorials
Plugins and tutorials are great designing resources for the designers. With the help of tutorials, designers can learn and practice new technique of using their designing tool and plugins are meant to simplify their designing work. In the recent times, jQuery has become simply miraculous seeing that with jQuery you can discover plugins to achieve… Continue reading Showcase Of Fresh And Free jQuery Plugins And Tutorials
Recreate Google Nexus Menu
Recently I stumbled upon Codrops’ tutorial regarding the recreation of Google Nexus navigation menu. That was inspiring and such a creative navigation system from Google. So, I decided to create a jQuery version to challenge to myself. I have been playing with the original Google Nexus Menu for a while. Based on my observation, I summarised its… Continue reading Recreate Google Nexus Menu
Create a slide-out footer with this neat z-index trick
In this short tutorial, we are going to create an interesting slide-out footer with a bit of CSS. Grab the zip from the download button above, open it in your favorite code editor and read on! The Idea The effect we are after, is to give the impression that the page lifts up to reveal… Continue reading Create a slide-out footer with this neat z-index trick
How to build standards-compliant responsive design using @viewport
One of the key concepts in any responsive design is the change of viewport size. That’s because mobile viewports vary greatly from desktop viewports. To control the viewport size we traditionally use the viewport meta tag. However, the viewport meta tag, like all the worst browser developments of the last forever, isn’t W3C valid. It… Continue reading How to build standards-compliant responsive design using @viewport
Web Assets – Tips for Better Organization and Performance
Remember back to when we had to spend a lot of time optimizing our project’s assets (images, CSS, etc..)? Well today, users have a much faster Internet connection and it appears that we can afford to use bigger images or bigger flash files with a lot of video and pictures inside. However, with the rise… Continue reading Web Assets – Tips for Better Organization and Performance
Improving Layout With Vertical Rhythm
Learning all about the ins and outs of the technical side of typography is good. It will give you a solid grounding when looking for typefaces or fonts and will help you understand a little more about the art of typography itself. You’ll soon realise how much hard work it takes to get type right… Continue reading Improving Layout With Vertical Rhythm
Building a Circular Navigation with CSS Transforms
VIEW DEMO DOWNLOAD SOURCE In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique. Like I… Continue reading Building a Circular Navigation with CSS Transforms
Add Depth to Flat UI with Flat Shadow.js
A while ago, I stumbled upon a post called Flat design casts a long shadow by the fine folks at Web Designer Depot and I was amazed by how adding a simple shadow could create such a beautiful depth of design to the flat UI elements. What if we bring this effect to the web? Today, let… Continue reading Add Depth to Flat UI with Flat Shadow.js
CSS 3D Image Flip Gallery With Dynamic Shadows
My recent book Pro CSS3 Animation walked the reader through a simple version of a 3D flip image gallery. After publication, I wanted to take it further: thus, this article. The UI challenge addressed here is the same focused on in many of my other CSS 3Dworks, such as the Origami UI: we live in a world of increasingly diversified… Continue reading CSS 3D Image Flip Gallery With Dynamic Shadows
Tutorial: How To Build Input Fields with Tag-Style Item Blocks
Many newer social media communities and web applications are pushing the boundaries of interface design. Form inputs have changed a lot over just the past 4-5 years. One such feature is the tag select input field, where users can enter tags which appear as block items within the field itself. For this tutorial I want… Continue reading Tutorial: How To Build Input Fields with Tag-Style Item Blocks
How To Build a Range Slider Input with jQuery UI
Looking at the HTML5 range input element you can see a number of advancements. Forms are able to take in restricted information from users sliding between number segments. But unfortunately these HTML5 inputs are only supported in modern browsers. So although there are a few limitations we can try to work around them. I want… Continue reading How To Build a Range Slider Input with jQuery UI