Web Design

40 Logos And Objects Created With Pure CSS

Few years back, it was totally impossible to create logos or create characters only with the use of CSS, but now, thanks to the development in IT sector, it is possible. Today, designers can create logo only by using their coding skills. This sounds quite interesting and so the logo created with CSS only.

This collection is dedicated to those logo designs and characters that have been developed by using CSS only. If you are interested and want to get inspired then have a look at this collection and be inspired to create your own CSS based logos or characters. Do not forget to share your opinions with us via comment section below.

Logos In Pure CSS

Animated Flat Camera Icon

CSS Shredder

NES

Drawing the line

Player

Wall Clock

A lego house

Facebook

Chrome

Twitter

CSS Pencils

Big Mac

Lightsaber

CSS3 Raindrop

Bahamas Logo using CSS3

CSS House

Dibujando con CSS

Shapes

CSS House 2

CSS Flower

CSS3 Experiment

Wacky CSS example

CSS3 Gradients: No Image Aqua Button

iOS 7 Icons

Basic Tangram Set

Gmail

Star of Slants

Batman

Pixel Warp Pipe CSS Demo

CSS3 Zoom!!

Internet Explorer Pure CSS Icon

3D – CSS puzzle

The star spangled banner

Opera Logo with CSS

Pure CSS Twitter Fail Whale

Pacman CSS

The British Flag – version 1

Random art

CSS art gallery

Creative One Page Website Designs

The field of web designing follows many trends. Some are there to stay forever while some trends come and go. One page website design is one of those evergreen trends in the web designing industry that is not going to go out of fashion. Though, this is not the most common design trend yet many designers follow it. They can put their creativity in the best possible way and can experiment with different elements and things to see how their target audience interact with their work.
In this compilation, we have collected some fresh creative one page website design. All these one page designs are the best examples that demonstrate how to convey your message into few quick scrolls. Furthermore, they all have been designed very well and are compatible with most Internet browsers.

Reasons

Wistech

20 Let KIA

Spotify

Getgoldee

Vtcreative

Visage

Mapping Place Pins

Mabu

Jewellries

Folio

Odaly’s Irish Pub

Shape Shift

Pete Nottage

Kevin Lagier

Joy Interactive

StartupTurkey 2014

A visual history of computers

DigitalPod London

Useful And Fresh HTML5 & CSS3 Tutorials

With this collection, we are sharing with you more than 35 useful and fresh tutorials about CSS3 and HTML5. Both of these technologies have been widely used these days in web development. The adaptation to these technologies by the designers and developers is so much increased that you can hardly find a modern website that was made without them. With HTML5 and CSS3 now designers and developers can achieve incredible results and create better online experience.

Here is the list of more than 35 fresh and useful tutorials on CSS3 and HTML5. We hope that you will like this collection and find these resources useful as well. Do share your opinions with us.

Building a Circular Navigation with CSS Transform

( Demo | Download )

In this tutorial we are going to show you how to create circular navigations using CSS transforms.We are 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.

Animated Border Menus

( Demo | Download )

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.

Button Switches with Checkboxes and CSS3 Fanciness

( Demo | Download )

In this tutorial we will create some realistic-looking switch buttons using pseudo-elements and checkboxes.

Transitions for Off-canvas Navigation

( Demo | Download )

Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu.

Pixels, EM, And Percentage

Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a number of methods of measurements used on the Web, specifically in CSS, namely Pixel, EM and Percentage.

Create Circle Using CSS

CSS3 can be used to draw simple design elements like square, circles etc. Previously web designer use Photoshop images and JavaScript to do this work but CSS3 properties has made it easy to create circles. Circles created using CSS are extremely fast loading than images.
So I am starting this short tutorials which will tell you how to use border-radius property and draw a circle in no time.

Creative Loading Effects

( Demo | Download )

Today we’d like to show you some ideas for creative loading effects. Nowadays, many different page loading animations are used in websites; just think of the subtle red loading bar seen on YouTube.

Build a custom HTML5 video player

( Demo | Download )

Media players that are built in to browsers vary in design. Ian Devlin explains how to use HTML5′s media API to build a custom player with a UI that stays consistent no matter what browser you use.

Using CSS3 Page Break To Organise Print Pages

Although we are currently leaving in a digital era where everything can be accessed easily, there are many people who still prefer reading long text on paper. There is a chance that a number of your users will print out your content to read offline.

CSS Clipping and Masking

CSS Clipping and Masking — Show and Hide Parts of Images and Elements with Code.

CSS3 3D Transformation Functions

( Demo )

In this tutorial we look at the basic 3D functions you can apply to elements.

A Look Into: Using CSS Variables

( Demo | Download )

In this code example, we created a CSS variable named primary-color. However, unlike in CSS Pre-processor, where we can declare variables independently, the variable in CSS should be nested under a CSS selector.

Pure CSS Slide Up and Slide Down

( Demo )

If I can avoid using JavaScript for element animations, I’m incredibly happy and driven to do so. They’re more efficient, don’t require a JavaScript framework to manage steps, and they’re more elegant. One effect that is difficult to nail down with pure CSS is sliding up and down, where the content is hidden when “up” and slides in when “down”. The reason it’s difficult is because you may not know the content height. After playing around with different CSS properties, I’ve found a way to make a pure CSS sliding effect.

Animated falling lamp from the ceiling

( Demo )

Looking around for ideas on my site edoardoo.com (which is now restyled, have a look! ), I’ve decided to implement something that was pretty easy in my mind, just an animated falling lamp from the ceiling of the browser.

Exploding Blocks with CSS and Javascript

( Demo | Download )

In this tutorial you will find a lot of useful materials for both beginners and advanced web developers.

CSS3 Navigation Menu Tutorial with Notification Badges

In this tutorial We will be showing how to make minimal CSS3 navigation menu that can be customized to fit your projects requirements and looks.

Reshaping the web with CSS shapes & exclusions

( Demo )

Today’s web is built of rectangles, we can try and cheat it by creating other shapes in the browser, but the basic foundation is rectangles.

Glowing Text Effects

( Demo | Download )

In this CSS3 tutorial We will show you how to create a glowing text effects using CSS3. In this CSS3 Tutorial we are going to use BPdots font for dotted text effects and carbon texture (included in download file) for background.

Create a minimalistic black and white navigation with HTML and CSS

( Demo | Download )

In this tutorial We will show you how to create a minimalistic black and white navigation using HTML and CSS.

Create a flat, four part square menu with HTML & CSS3

( Demo | Download )

In this tutorial We will show you how to create a flat four part square menu with CSS3 and HTML. Have fun!

Create a Hidden Sliding Navigation Bar Using CSS3 Transitions

( Demo | Download )

In this tutorial I want to demonstrate how to build an inner hidden content bar which slides down when hovering. You can place this into your header, footer, or even somewhere inside the page content.

Using HTML5 Drag And Drop To Create A Shopping Cart

( Demo | Download )

Here we’ll be taking advantage of the drag and drop functionality to create a basic shopping cart. The basic functionality we’ll cover, will be adding an item to the cart and if it already exists updating the quantity and totals.

Adding Alarms to the Digital Clock

( Demo | Download )

How to Create a Simple Drag and Drop Component Using HTML5

( Demo )

The drag and drop feature from the HTML 5 can optimize your website with a more dynamically interactive elements that your website users will find more engaging. HTML 5 has become an important aspect in web designing especially in creating highly creative and interactive components that will make your website more functionally usable for your visitors.

Create a slide-out footer with this neat z-index trick

( Demo | Download )

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!

Automatic Figure Numbering With Css Countrs

( Demo | Download )

Learn about CSS counters, the figure element and how to combine both for automatically numbering figures in a web page.

Making a Beautiful HTML5 Portfolio

( Demo | Download )

In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.

Smooth Diagonal Fade Gallery with CSS3 Transitions

( Demo | Download )

In this tutorial we are going to create a gallery with a smooth diagonal fade effect, powered by css3 transitions. It will scan a folder with photos on the server and display them in a grid that spans the entire browser window. Adding new photos is as easy as copying two files (a regular image and a thumbnail, preferably 150×150 px) to the gallery folder.

How to Build Cross-Browser HTML5 Forms

( Demo | Download )

In this tutorial, we’re going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.

Simple Website Layout Tutorial

( Demo | Download )

Simple Website Layout Tutorial Using HTML 5 and CSS 3.

How to Detect Geolocation On Web Browser Using HTML5

( Demo | Download )

HTML5 is been a part of many of my projects and once again I want to share a pretty interesting usage of HTML5 to detect geolocation of the user from the web browser. Currently most of the web browser support HTML5 except the lame Internet Explorer and this geolocation detection works fine with Firefox, Opera, Chrome and Safari.

Caption Hover Effects

( Demo | Download )

A tutorial on how to create some subtle and modern caption hover effects.

Expanding Search Bar Deconstructed

( Demo | Download )

A tutorial on how to create a mobile-friendly and responsive expanding search bar.

Build animated feature sections with CSS3

( Demo | Download )

Josh Netherton guides you through creating an animated features block, from sketching storyboards to coding out the CSS3 animations – learning the syntax on the way.

Sliding Horizantal Layout

( Demo | Download )

A slider-like layout where the neighboring sections are positioned horizontally next to each other.

An Introduction to CSS Custom Filters

( Demo | Download )

CSS Regions and Edge Reflow

( Demo | Download )

How to Create a Custom, Crisp Icon Font with IcoMoon App

( Demo | Download )

In this tutorial you will learn how to create a custom, crisp icon font with iconmoon app.

Useful Collection Of Free Photoshop Files

Viewing other designers work inspires possibilities that can be achieved through the software. One can examine what kind of methods and techniques they used to achieve their designs.How can it be further improvised and other possibilities can be recreated more distinctively. And if a resource is provided of editable version of files, such as PSDs, a plus point adds up for designers to make these files useful for their product and save time, expenses and modify according to their requirements to make inspiring productions.

Here is a collection of brand new free PSD files for you to download. These files can be used for both personal and commercial purpose according to the limitations. PSD, Photoshop files are always a great resource for every graphics or web designers who are opt to make unique designs in minimal time and expenditures. These are easy to modify files that can help is create a unique designs and also for learning newer techniques.

Transparent Organic Form

newpsdfiles

App Store iOS Icon

newpsdfiles

Receipt

newpsdfiles

Microphone

newpsdfiles

Clock iOS Icon

newpsdfiles

Metal volume knob

newpsdfiles

Gold medal with ribbon

newpsdfiles

Software box with disc PSD template

newpsdfiles

Message Pop-Up

newpsdfiles

Business web buttons PSD template

newpsdfiles

People discussing, PSD template

newpsdfiles

Meteo Widget

newpsdfiles

Psd iPad Perspective MockupResponsive Grid System

newpsdfiles

jPlayer Audio Skin

newpsdfiles

Map Markers

newpsdfiles

Dark UI Elements

newpsdfiles

Blank note pinned to corkboard

newpsdfiles

Settings Tooltip

newpsdfiles

Leather UI Elements PSD

newpsdfiles

Free High Quality Texture Packs

Textures are steadily gaining fame especially for web designing purposes. There are a lot of reasons that make textures more preferable to plain colors especially when used as backgrounds. Many different kinds of texture designs are available online many of which are of cost and many are free. These textures may include granite, peeling paints, mosaic, abstract textures and so on. All of them are available in various colors but selecting and choosing the best one that can take a design to the next best level is challenging and time consuming which is not a luxury all designers can afford. To make a design more appealing the texture should be of high resolution and quality so that it maintains its quality. Textures tend to give the design a more continuous and involving look.

We have compiled an entire collection consisting of different textures for everyone today. They are of different designs and colors and completely free to be downloaded by all. Enjoy scouring through them!!

Surface of the Sun Texture

stylishtexturepack

4 Large Stone Textures 3

stylishtexturepack

Lichen Textures

stylishtexturepack

4 Large Teak Wood Textures 1

stylishtexturepack

Ripples & Rings Background Textures

stylishtexturepack

5 Burst Backgrounds 1

stylishtexturepack

Texture Pack 15

stylishtexturepack

Premium Texture Pack III

stylishtexturepack

Quarry Texture 25

stylishtexturepack

Rust and Blood stylishtexturepack No.2

stylishtexturepack

Payne’s Grey Texture Pack

stylishtexturepack

High Quality Wood Texture Pack

stylishtexturepack

5 High Quality Asphalt Road Textures FREE Seamless

stylishtexturepack

Black & White Mottle Paint Texture

stylishtexturepack

Muddy Patterns-Free Texture Pack

stylishtexturepack

Snail’s Snack-Free Texture Pack

stylishtexturepack

17 Cracked Pavement Textures

stylishtexturepack

Badly Crumpled Brown Paper Texture

stylishtexturepack

Distressed and Cracked Wall Texture

stylishtexturepack

Leaves Texture

stylishtexturepack

Golden Glow-Watercolor Stock Pack X

stylishtexturepack

Perspective Mesh Texture Background

stylishtexturepack

Hi-defintion Cracked Paint Texture

stylishtexturepack

Swirls of Paint Textures

stylishstylishtexturepack

Hi-Def White Cracked Grunge Texture

stylishtexturepack

Flexible Grid Tools For Responsive Websites

With the introduction of new technologies and usage of new innovative ways, web industry has totally changed the criteria of web development. Today, responsive website layouts are more popular as compared to traditional website layouts. This is because of the reason that responsive website layouts are more interactive and they engage the visitors for relatively longer period of time. This is the reason why developers are now creating responsive website layouts to a greater extent.

With responsive website layouts, today’s websites are no more nifty looking websites rather they have been evolved and improved. Responsive website layouts are more reviving and refreshing and they also give life to your website design. Here is the complete collection for you of some amazingly flexible grid tools to help you create visually appealing and fully functional responsive websites. Let us have a look at this collection and enjoy! Feel free to share your opinions with us via comment section below.

Gridpak

A Responsive Web Design tool for creating grids by Erskine Design.

Responsive Calculator

Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

Responsive Grid System

The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

Semantic Grid System

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.

Simple Grid

SG is prepared for 4 distinct ranges of screen size: screens 720px, screens > than 985px, and screens > than 1235px. So people visiting your site will receive a layout that’s tuned to the size of their browser window. Say goodbye to horizontal scrollbars.

Golden Grid System

A grid system for responsive web design. Includes folding columns, elastic gutters, a zoomable baseline grid, and a delightful grid overlay script.

Gridset

Designing grids with Gridset is as easy as dragging guides in Photoshop or Fireworks. Gridset provides whatever you need: PNGs, a comprehensive cheat sheet and CSS.

Columnal CSS Grid System

A responsive CSS grid system for rapid prototyping.

Foldy960

A responsive 960 grid from Paravel.

SUSY

Susy: Semantic grids with a responsive touch.

320 and Up

320 and Up is a lightweight, easy to use and content first responsive web design boilerplate.

jQuerin Grid Builder

The jQuerin Grid Builder is a responsive code generator which outputs clean and semantic html & css code.

14 UI Wireframe Stencils For Quick Prototyping

In this round up, we are presenting 14 wireframe UI stencils for the most popular social networking websites and others, so that you will be able to do a quick prototyping by using all these wireframing UI stencils with no trouble. You can use these wireframe UI stencils to create quick mockup of your clients’ projects and let them see how their project will look once it is completely designed.

Here is the complete collection after a small jump. Feel free to share your opinions with us via comment section below. Your comments are always more than welcome. Enjoy looking into this collection and have more fun in using them for your works.

Youtube UI PSD

iPad Sketch Elements

Free responsive wireframes

Twitter Widget

Twitter Widget

Notification Centre UI PSD

Facebook Fan Page GUI PSD

Twitter GUI

iOS7 Wireframe

Google+ GUI PSD Kit

FORM UI

Moonify UI

jQuery Mobile UI Elements

Responsive Layout Wireframe

Free And New Prevailing UI Kits

UI kits are the initial building blocks of any website or software. Most of the designers treasure good UI kits and they would definitely love to add more great UI kits to their reserve. Designing UI kits is a difficult job since it requires new ideas and loads of time to create just the right design that will attract the ideal audience. These kits can be designed using Adobe Photoshop, which is the most commonly used software in the market. To meet the most current trends and requirements the UI kits designers need to brainstorm to bring about the best combination of colors, buttons, widgets, menus and other primary tools in shaping any software. Searching and finding a UI kit that best suits ones needs is crucial to making a successful project and for that the designers require time which is not always available.

These kits are most useful to those designers who don’t have enough time to design their own interface from scratch. Therefore, today we have compiled some excellent UI kits for all the designers. These can be easily downloaded and adjusted to please you most. Go through our collection and find the perfect design to get you started.

Free Jade Ui Kit

freeuikits

Thallium GUI Kit FREE PSD

freeuikits

UI Kit

freeuikits

UI – Login

freeuikits

Mobile and Web UI Kit PSD

freeuikits

Ui Kit

freeuikits

Cream UI – Mobile Interface Kit

freeuikits

Folia UI – PSD Kit

freeuikits

Flat Ui

freeuikits

Leather App UI Kit

freeuikits

IOS elements

freeuikits

File Uploader

freeuikits

Flat Video Player Toolkit

freeuikits

Retro UI Kit

freeuikits

Brandfolder UI Kit

freeuikits

Momonosuke UI

freeuikits

Free Jade Ui Kit

freeuikits

Bright UI Kit Elements

freeuikits

iPad iOS 7 UI Kit

freeuikits

Mobile and Web UI Kit PSD

freeuikits

Web Ui Kit 2

freeuikits

Teragon Audio UI Kit

freeuikits

Chart Widget [Sketch]

freeuikits

15 Best Joomla Templates For Web Designers

This post showcases an exclusive collection of some of the best Joomla templates designed for the web designers. Every content management system offers its own and unique template system to its users so that they can use them to make their website look unique and different from others. Similarly, Joomla also has a very huge repository of themes developed by Joomla theme developers. This is something that makes Joomla a preferred choice of web designers.

In this section, you will find 15 best and very pleasing Joomla templates that can make your website look stunning. Here is the collection after the jump. Enjoy!

JF Calla Exteriors

( Demo | Download )

JSN Metro

( Demo | Download )

JSN Yoyo

( Demo | Download )

Zenith

( Demo | Download )

St BUZZ

( Demo | Download )

Skylab – Business Joomla template

( Demo | Download )

Arcom

( Demo | Download )

Eris

( Demo | Download )

Meembo Blue

( Demo | Download )

Cirrus Orange

( Demo | Download )

Hexagon

( Demo | Download )

Orddie

( Demo | Download )

ST Loki

( Demo | Download )

ST Business

( Demo | Download )

Expose

( Demo | Download )

15 Best Bootstrap Design Tools

In this post, we have gathered 10 best bootstrap design tools for the coming year. Bootstrap is the most commonly used front end framework in 2013 and many of you must have played with it. Therefore, we thought to compile a list of some useful bootstrap design tools for you.

As a designer, it is always useful to look for some more design tools and options to make designing and developing tasks easier. Here, we are presenting 10 best bootstrap tools for 2014. We hope that you will like this collection. Also, let us know if you have more tools to recommend. Your comments are always more than welcome. Enjoy!

Bootstrap Designer

Bootstrap Designer is an online design tool, producing awesome HTML5 templates based on Bootstrap framework.


Read the rest of this entry »