Twitter Bootstrap is a mobile first front-end framework that is lightweight and quite easy to use and helps speed up our work as web designers or web developers.

Bootstrap is currently the number one or most popular HTML and CSS Framework. Bootstrap is also a solution for those of you who want to create responsive templates, where templates can look good when opened on various devices. Many people already use bootstrap, some of them share their homemade templates for use by others who want to work faster.

For those of you who need a template to speed up work, here TWD displays 10 free bootstrap templates and of course they are responsive for all of you.

Piccolo
piccolo bootstrap template

Munter
munter bootstrap template

Sharwadarma
sharwadarma bootstrap template
sharwadarma bootstrap template

Mamba
bootstrap template mamba

Initio
bootstrap initio template

Yobo Flat HTML5 CSS3 Template
yobo bootstrap template

Brushed
brushed bootstrap template

Instant
instant bootstrap template

Meilleur
milleur bootstrap template

Landing Page
bootstrap landing page template

Those are 10 free and responsive bootstrap templates that we have collected for you specifically for visitors to Tutorial-Webdesign.com, hopefully the templates above are useful to speed up your work.

Greetings Web Design & Development Indonesia

Making website background animations so that they can change colors is currently very easy to implement, of course with the presence of CSS3, especially the animation feature in CSS3, it is increasingly possible to make this quickly.

Website background that changes can attract the attention of website visitors, of course it can be used to support the appearance of the website if it is used on the right website and with the use / placement of interesting animations.

website background animation

This time Tutorial-Webdesign.com will give a short tutorial on how to change the website background color with the help of css animation.

Related article:

Creating a Full Background Website
Tutorial on Creating Responsive Web Portfolio Using HTML5, CSS3 and Jquery
Creating HTML Structure
In this demo there is no special html tag, because we will only focus on the background

Indonesian Web Design Tutorial

there it appears that we will only display the words “Web Design Tutorial Indonesia”

Animating Effects With CSS
To make the background change color, we need the animation feature from CSS3, like this code

body{
background-color: #f1c40f;
-webkit-animation: color 5s ease-in 0s infinite alternate running;
-moz-animation: color 5s linear 0s infinite alternate running;
animation: color 5s linear 0s infinite alternate running;
}

/* Animation + Prefix for the browser */
@-webkit-keyframes color {
0% { background-color: #f1c40f; }
32% { background-color: #e74c3c; }
55% { background-color: #9b59b6; }
76% { background-color: #16a085; }
100% { background-color: #2ecc71; }
}
@-moz-keyframes color {
0% { background-color: #f1c40f; }
32% { background-color: #e74c3c; }
55% { background-color: #9b59b6; }
76% { background-color: #16a085; }
100% { background-color: #2ecc71; }
}
@keyframes color {
0% { background-color: #f1c40f; }
32% { background-color: #e74c3c; }
55% { background-color: #9b59b6; }
76% { background-color: #16a085; }
100% { background-color: #2ecc71; }
}
There it appears that the animation will be carried out for 5 seconds by making changes to the background in 5 stages and will be repeated continuously with the infinite command.

Results

You can see and download what we have made with the link below

DEMO | DOWNLOAD
so much

Hopefully this short article can be useful for you in learning the features in CSS3

Greetings Web Design & Development Indonesia

The presence of CSS Shapes as a new feature of CSS3 is certainly welcomed by web designers around the world. This is because CSS shapes are considered one of the future of web layouts.

With CSS Shapes we can create website layouts such as magazines and arrange the content at will. CSS Shapes allows us to wrap content according to the specified path, we can create text that follows the shape of an existing image object.

However, to apply CSS Shapes on web pages today is not easy, it is still very difficult to make, too much code to type, and this is of course still confusing and time consuming if we really want to implement it. So far there are no really easy tools to create CSS shapes.

The difficulty of web designers to create layouts using CSS Shapes attracted the attention of a web developer named Razvan Caliman to create a CSS Shapes Editor for Chrome. This is a Developer Tools extension that provides an interactive editor for specifying property values ​​for shapes, such as circle(), ellipse(), and polygon().

We can see in the video above how easy it is to set the path. The interactive editor is placed above the selected element. This tool adds controls to adjust, move, scale and rotate shapes. Visually we can see the code is directly generated and the layout form is formed. This is fantastic, it makes working with CSS Shapes even easier, CSS Shapes is even more fun because it’s easier to experiment with the shapes you want right in the browser.

CSS-Shapes
Example Layout with CSS Shapes

The example that tutorial-webdesign.com made can be seen here, and can also be downloaded via github, to open it, you are expected to use the latest google chrome.

How to use.
To bring up the CSS Shapes Editor you need to install the extensions CSS Shapes Editor for Chrome from the Chrome Web Store.

How to use it is quite easy, open your google chrome, then open the developer tool which can be accessed via the View menu -> Developer -> Developer Tools
If the developer tool has appeared you can open a new tab called shapes.

To start, you can select one of the objects in the website layout, then click the plus (+) icon in the shape tab, choose whether you want to make a circle, ellipse or polygon shape.

You can see the pictures below if you are still confused about using it.

How to create an object with a polygon shape

For polygons, click on the edge of the interactive editor to add a new vertex, drag a point to adjust the shape or double-click an existing point to delete it.

css shape polygon
polygon

To switch to transform mode, click the “move” icon on the interactive editor toolbar, then move, scale and rotate the polygon shape.

All types of CSS units can be used with CSS Shapes. By default, the CSS Shapes Editor uses pixels, but understands other units as well. It is sometimes useful to change the unit type of shape coordinates, for example to make them responsive. You can hold down the SHIFT key and press the “pointer” icon.

css shape transform
transform

Circles and Ellipses can only transform to scale and move, but can’t rotate

css shape convert
convert

This clips-path CSS masking uses the same syntax as CSS Shapes, making it possible to reuse the CSS Shapes Editor. That’s why the clip-path calculated value is also available in the sidebar.

css shapes clip
clip

Extensions CSS Shapes Editor for Chrome is built using the basic interaction of the shape editor library which is also used by the CSS Shape Editor for the Brackets extension.

Other sources:

CSS Shapes 101
Using CSS Shapes to Enhance Visual Storytelling
CSS Shapes
CSS Shapes Editor for Chrome
Hopefully this information can inspire those of you who are in the world of CSS3 web design

Preloading Animation for Blogspot Pages — This Pre Loader uses CSS3 in the transition animation to open and close the page and uses SVG Loader animation, as well as javascript so that it can determine the preloader timings when the data/progress loading process has finished on a page and closes the preloader again.

SVG brief: SVG stands for Scalable Vector Graphics and is a new file format for displaying graphics in XML-based web development. still a bit difficult to understand, but in the future it is definitely more complex to create objects / animations than CSS3.

Blogspot Preloader

Before using the preloader trick, I remind you first to back up your template so that something unwanted happens.

the first step is to login to your blogger account => Template => Edit HTML, then choose 1 theme from the 3 preloaders that I provide. choose one and copy and paste the above code:
]]>.

/* HourGlass THEME / .ip-headers { position: fixed; top: 0; z-index: 100; min-height: 480px; width: 100%; height: 100%; background: #505050 url(http://3.bp.blogspot.com/-mQ_lrcu74q8/VE4Q3CXlgtI/AAAAAAAAAIAY/ahW6ISKyJMY/s1600/hourglass.gif) no-repeat center center; / background color and loader image / z-index: 999999; } .ip-header .ip-loader svg path.ip-loader-circlebg { strokes: #fff; / circle loader background color / } .ip-header .ip-loader svg path.ip-loader-circle { -webkit-transition: stroke-dashoffset 0.2s; transition: stroke-dashoffset 0.2s; strokes: #13BAFA; / Circle line color when loading */
}
Also copy-paste all the CSS below after the theme’s CSS.

/* Pre-loader play */
.ip-loader {
position: absolute;
left: 0;
width: 100%;
@keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); }
}

.loaded .ip-loader {
opacity: 1;
}

.loaded .ip-loader {
-webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

@keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

/* Header animation when loading is complete */
.loaded .ip-headers {
-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); }
}
@keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
}
.layout-switch .ip-header {
position: absolute;
}
/* End Preloader */
Next, copy-paste all the HTML code below right under the body tag or body class …

and put the three Js below right above the code

<script

Save the template and open your blog page and see the results.

You can also create this pre-loader trick yourself, such as changing the color, logo, and color of the circle loader
the method :

Look for the CSS as below, then change the url/address of your image which I marked in the red text.

for the background color, change the hex code that I marked with Font Bold.

Usually to create a layout like pinterest.com we use a plugin from desandro, namely the jQuery masonry plugin.

But in this tutorial I will create a masonry layout like pinterest using only CSS3 without involving the jquery plugin. How to ?

masonry css only

First, we must know and learn about CSS3 Multiple Columns.

CSS3 Multiple Columns has several properties, here I will use several properties, including:

column-count
column-gap
divs {
column-count: 3 ;
column-gap:15px;
}
The column-count property with a value of 3 written in the script indicates that the layout will display 3 columns.
In the column-gap property with a value of 15px written in the script shows the distance between the columns is 15px.
For more details, please learn CSS3 Multiple Columns here.

Having studied CSS3 Multiple Columns, let’s discuss what our main goal is, creating a page like pinterest.

Here’s the HTML script we created:

• … …

Then the CSS we create as follows:

CSS container creation section

.container {
max-width: 1170px;
padding: 0px 15px;
margins: 30px auto;
}
CSS column creation section

.content-columns {
list-style: none;

-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;

-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;
}
CSS boxed section