Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Sunday, December 10, 2017

Average Image Color Utility

Demo




Get the average color of an image. Upload your own image or get the images from pixabay.com.

Tuesday, October 24, 2017

Font Awesome App Icon Generator

Do you need an icon for your application or for custom folders on your desktop?


The Font Awesome Icon Generator is a free tool for creating custom icons based on the Font Awesome icon font.



You can access the Font Awesome Icon Generator here.

Saturday, April 1, 2017

4 Awesome Things You Can Do With HTML Canvas


The people at Skilled.co created a cheat sheet that allows developers from all experience levels to create unique images and art to fit any of their web design needs. HTML5 advanced technology permits designers to not only create images, but full animations that range from simple movements to complex. The <canvas> element bears significant potential for those interested in game design.

Friday, March 3, 2017

Google PageSpeed Insights - How To Optimize Your Website - Part 1

If your website is taking forever to load and you would like to optimize it but don't know where to start, Google PageSpeed Insights Tool is exactly what you need.


Sunday, June 21, 2015

Time To Color Blogger Widget


The time to color Blogger widget will generate a background color for your blog according to the current time and update every second.




The end result will look like this.



The Time To Color script can be used on any HTML page. Here are the steps for adding it to Blogger as a widget:


Monday, December 29, 2014

Karate Button - Animated Mobile Menu Button - Twitter Bootstrap 3


A nice addition to Twitter Bootstrap would be an animated mobile menu button similar to the one on the apple.com website.

Demo

Keep in mind that if you are not viewing the Demo from a desktop browser you will need to resize the window in order to see the mobile menu button.

In case you were looking for a simple way to add an animated mobile menu button to your twitter bootstrap website, here it is:

In order to have a fully functional Twitter Bootstrap mobile menu Karate Button all you have to do is include the two links below in the header section of your website.

<link rel="stylesheet" type="text/css" href="http://ta-systems.net/Blogger/tudor-anghelina.com/Karate-Button/karate_button.css">

<script src="http://ta-systems.net/Blogger/tudor-anghelina.com/Karate-Button/karate-button.js"></script>


The Karate Button uses JavaScript for removing the standard Twitter Bootstrap default mobile menu button and replace it with the CSS3 animated mobile menu button.


Please leave your questions / suggestions in the comments sections below.

Friday, March 7, 2014

Free Pure CSS3 Logo



CSS3 is supported on most mobile devices nowadays so you have the option of designing a custom CSS3 logo.

See a demo of the Pure CSS3 logo here and download the code used for this tutorial here.

Each of the five words used for the creation of the CSS3 Logo is enclosed in an individual div. By applying CSS3 gradient backgrounds you will get the colored stripes.

The first letter of each word is actually a lighter version of the background color.

You can use different color combinations to mach the palette of your brand.

Sunday, February 23, 2014

Sunday, February 9, 2014

Web Design For Beginners - 4. Your First Web Page

So now that you are all setup you can create your first web page. We could first go into the details and learn about each of the HTML tags but that would be less fun.




1. First you will need to open Aptana Studio 3.

Friday, February 7, 2014

Single Page HTML5 CSS3 Business Card Template 2.0

After seeing a huge interest in the Single Page Business Card Tutorial i decided to create a Single Page Business Card 2.0 Template. Besides listing your title and contact details the 2.0 template also has some nice CSS3 transition effects, is available in 4 colors and the best part: IT'S FREE FOR DOWNLOAD.



Demo Download




CSS3 Transition Effect


On hover the Name/Title block and the Contact Details blocks slide out vertically showing a centered block containing name and position, social and contact icons.

Sunday, February 2, 2014

How To Create A Free Contact Form For Your Website Using Google Drive

If you are determined not to use PHP for creating a contact form you have the option to use Google Drive Forms. You can then use a custom page styling to create your own contact page. For the purposes of this tutorial I will use Twitter Bootstrap 3.



Demo Download



1. Open drive.google.com and create a new form. Add the following fields until you get the result as shown in the screenshot below. You will need a Name, an E-mail, a Subject and a Message field.

How to Create a HTML5 CSS3 Single Page Business Card - Free Download

Build a beautiful, single page Business Card using HTML5 and CSS3


Free HTML5 CSS3 Single Page Business Card
Demo Download


1. First, open your favourite text editor and create a new HTML5 file. I am using Aptana Studio 3 which has the option to create a new file based on a predefined template.

Sunday, January 19, 2014

Web Design For Beginners - 1. What You Will Need And Why



So you want to take your first steps towards Web Design. A good starting point is to understand what you will need and why.



Hardware:


  • Average Computer (Desktop or Laptop)

Software:


  • Operating System
  • Web Browser
  • Text Editor
  • Image Manipulation Program

Trying to learn web design should not cost you more than it has to. So I will try to only suggest only open source or free software and hardware that will get the job done without being too expensive.


Monday, October 14, 2013

Free Music Album Blogger Template - HTML5 Audio, CSS3, JavaScript





HTML5 Audio - Free Blogger Album Template


Download the free Blogger template to present your Album to your fans. Your tracks can be played online and you can also add a download link to your entire album or the iTunes link.


Saturday, October 12, 2013

How To Create A Blogger Popular Posts Carousel




Stylish Popular Posts Carousel for Blogger


After reading a lot of questions regarding resizing the Popular Posts thumbnail image size, I decided to write this tutorial. But that wasn't enough. The reason for the many questions is that publishers using Blogger are searching for a better, more attractive way to display their popular posts.

I wrote the code for a blogger carousel as displayed on this blog's homepage and decided to offer it for free for download.

Thursday, October 10, 2013

Shimmer - Album Website Launched



Visit the album website here.





New HTML5 Website Launched


Download the complete album for free.

For the release of the Shimmer album I have created an HTML5 website with integrated audio player, microdata markup for search engine optimisation and responsive design for cross screen compatibility.

Thursday, October 3, 2013

New Hotel Website Launched: CSS3, HTML5, Twitter Bootstrap 3




Responsive Design


Cross-screen compatible design featuring a responsive Navbar. The responsive layout adapts well to desktop, tablet and smartphone screens.


His & Hers Free HTML5, CSS3, Bootstrap3 Resume Template

After posting the Free HTML5, CSS3 & Twitter Bootstrap 3 Minimalist Design Resume I got some interesting feedback. I decided to look at the improvement suggestions and release Version 2.0 of the Free HTML5, CSS3, Bootstrap3 Resume Template.

Special thanks to +David Metcalfe for the design improvement suggestions.








Responsive Design


The resume template was designed with cross-screen compatibility in mind. The responsive, scrollspy navigation ensures easy access to all sections of the resume while resizing in order to adapt to the screen size.

Tuesday, October 1, 2013

Google Web Designer Launched In Public Beta

Today Google has announced the release of Google Web Designer public beta, a useful tool similar to Dreamweaver. Google Web Designer is available for Windows and OS X.




Google Web Designer is a WYSIWYG (What You See Is What You Get) editor aimed at add creation, but it can also be used to create webpages.

How To Create A Blog Navigation Using The Blogger Labels Widget

In this tutorial you will learn how to create a Navigation Bar using the Blogger Labels widget.



We will use the Blogger Simple template and style it using the Twitter Bootstrap 3 framework.

If you want to follow the tutorial step by step but don't know how to apply the Blogger Simple Template and integrate the Twitter Bootstrap 3 framework, you can find a tutorial here.


1.

First off all, we will remove the Blogger Navbar so that it will not conflict with the static navbar we will create in this tutorial.

If you are unsure how to do this you can find a tutorial here.