css3transitionblog-blog - Tumblr blog

[css3transitionblog-blog]

A Complete Guide to CSS Flexbox

We are going to give you a complete tour about CSS Flexbox layout. In this we will cover almost every aspect about flexible box, Our focus is to cover all properties for the parent element which is also know as flex container and the child elements as will which is called flex items in term of flex-box.  we will provide you demos for every properties with some brief so that you can understand it very easily. First of all i am going to clear what will be my today's agenda: Introduction - What is Flex - Why we need Flex Flex Syntax & Properties - Flex Display - Flex-direction - Flex-wrap - Flex-flow - Justify-content - Align-items - flex: none | flex-grow flex-shrink flex-basis - Flex order We love FloatsIt’s a question not a statement. Nowdays with floats we are facing too many issues that needed to fix but before fixing lets find out what are the issues currently we are facing with elemenets floats. - Weird behaving - Clearfix - Cross- browser issues - Parent container breaking - Content spill over

What you want to change?

- Flexible parent container - No floats Hack - no clear fix - adjustable child container

What is Flex?

CSS Layout Module - Flexbox offers greater control over arranging components of web pages items along one axis. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. - Flexbox or Flexible box is the css3 property - Flexbox is the layout mode - Improvement over the Floats - It helps in displaying the elements on the page as per - Ability to make all neighboring items the same height - It helps in achieving the grid layout - Easy horizontal and vertical centering - Ability to change the display order of the items independent of the html soruce

Let’s Meet the Flex (Flex Vocabulary)

Flexbox Container {}

You can create a flex container by setting the ele’s display property to flex|inline-flex .flex-container{ display: flex; }

.flex-container{ display: inline-flex; } Display: flex creates a block-level flex container Display: inline-flex creates a inline-level flex container

Flex items {}

applying the flex display mode turns the child elements of the flex container into flex items

Note: You can turn any flex item into a flex container by setting its display to flex (resulting in nested flexbox)

Flex Container - Properties {}

Flex container properties allow you to control how items appear within the container flex-direction row | column | row-reverse | column-reverse

Flex items {}

FFlex items line up along one axis Main axis -or- cross axis The main axis is the flow direction you’ve specified for the flex container. The cross axis is perpendicular to the main axis Note: axis direction is specified t the direction of the writing system in use. For Example: write In horizonally oriented languages - ‘row’ would align items horizontally. Vertically oriented languages - ‘column’ would align items vertically When flex-direction is set to row, the main axis is horizontal and the cross axis is vertical

When flex-direction is set to column, the main axis is vertical and the cross axis is horizontal

flex-wrap (flex-direction: row;) { }

nowrap(default) | wrap | wrap-reverse. When wrapping is disabled, flex items squish if there is not enough room, and if they can’t squish any further, may get cut off if there is not enough room in the viewport.

1 ---------------------------------- 10

#container { display: flex; flex-direction: row; flex-wrap: wrap; } .box { width: 25%; }

justify-content (flex-direction: row;) { }

flex-start | flex-end | center | space-between | space-around.

Flex items are, by default, as wide as they need to be to contain the element’s content. The justify-content property defines how extra space is distributed around or between items.

justify-content (flex-direction: column;) { }

flex-start | flex-end | center | space-between | space-around.

Flex items are, by default, as wide as they need to be to contain the element’s content. The justify-content property defines how extra space is distributed around or between items.

align-items { }

flex-start | flex-end | center | baseline | stretch

The align-items property allows you to arrange items on the cross axis (up and down when the direction is row, left and right if the direction is column). Note: you must specify a container height

align-content { }

flex-start | flex-end | center | space-around | space-between | stretch

The align-content property applies only when there are multiple wrapped flex lines .

flex-grow { }

Value: number Default: 0

The Markup 1 2 3 4 5 The Style .box{ flex: 1 1 auto; } A flex-grow value of “3” means the item receives three times the amount of space than the remaining items set to flex-grow:1 .box4{ flex: 3 1 auto; }

flex-shrink { }

Value: number Default: 1

When flex-shrink is 0, items are not permitted to shrink and may hang out of their containing element Flex items stop shrinking when they reach their minimum size (defined by min-width/min-height). .box { flex: 0 1 100px; }

flex-basis { }

Value: length | percentage | content | auto Flex-basis defines the starting size of an item before any wrapping, growing or shrinking occurs. It may be used instead of the width property (or height for columns) for flex items. By default, flex-basis is set to auto (width/height value of item size) If item’s size is not defined or set to auto - flex-basis uses the content width.

Flex order { }

Value: integer | Default order value is ‘0’ The order property give the ability to display items in an order that is different from the order in the HTML source code. If items have the same order value = laid out in order they appear in code If items have different order values = arranged from the lowest order value to highest. .box3{ order: 1; }

.box2, .box3{ order: 1; }

.box5{ order: -1; }

Its all about Flexbox, Hope you liked it. I am attaching a PPT as well with demo & download link. Demo Download PPT File Read the full article

[css3transitionblog-blog]

How to create new app in Angular

In this post we will show you step by step process to Create a new Project in Angular. This will be helpful for the beginners who want to learn Angular from scrap to Create new angular App using Angular CLI. The Angular has come a long way since its started it journey from the first version as Angular 2. Now it is very easy to create new project as simple as installation of Angular CLI and running the ng new command.

Table of Contents

- What is Angular CLI - How to Create a new Angular project- Installing Angular CLI - Finding the Angular CLI Version - Creating a new Angular Application - Running your new Angular Project

What is Angular CLI

Angular CLI helps us to create an Angular application with all the configuration files and packages using single command. Angular CLI also helps us to add features like Angular component, Angular directives and Angular services etc. to existing Angular Applications. By using Typescript, webpack (for Module bundling), karma (for unit testing), Protractor (for and end to end testing) Angular CLI creates the Angular Application.

Lets see how to we can Create a new Angular project

Before starting lets setup some basic developer environment and install the required tools. It must be installed before stepping ahead with development. - Visual Studio Code (You can use any editor of your choice) - NPM Package Manager

Now lets Start Installing Angular CLI

Our first step will be to install Angular CLI. Npm install command is uses to install Angular CLI. npm install -g @angular/cli@latest The command we are using above given will install the latest version of Angular CLI in your machine. Point to be noted is we have used -g flag which stand for global is used to install Angular CLI system wide globally and It can we used in your all projects.

How to check Angular CLI Version

You can use ng --version to check the current installed Angular CLI version. ng --version How to install any specific version of Angular CLI Npm install -g @angular/cli@wished-version-name-here By using command above just putting version name in place of “wished-version-name-here” you can install your desired version of Angular CLI.

Creating a new Angular Application

It is now become very simple to create a new Angular project using Angular CLI. All you need to just run the given commands from the prompt ng new GettingStarted

So here in this command I am naming my project as GettingStarted and by doing this it will create a folder of GettingStarted and will copy the all the required dependencies and configuration settings here. Lets find out what Angular CLI does after ng new command. - Creates a new directory GettingStarted (which will be your project name). - It will Setup the directory structure for the application - Downloads and installs Angulara libraries and other dependencies - Install and configures TypeScript - Install and configures Karma and Protractor for testing

Note: Angular CLI will let you choose options for your project styling like CSS, SCSS, SASS, LESS and stylus. You can select any style method for your project. And yes, one more important thing you can Migrate from CSS to SCSS stylesheets for an existing Angular Project, check here

Running your new Angular Project

Just type ng serve to command area to run your application ng serve The Angular command given above will invoke the Webpack development server. The server will keeps a watch on our project folder. Any changes to code compiles the project again. We can also your npm start in place of ng serve works similarly. Web Development server listen on HTTP Port 4200 by default, Hence I will open in browser at http://localhost:4200/ and you will see Getting Started app is running here.

Read the full article

[css3transitionblog-blog]

A Complete Guide to CSS Flexbox

We are going to give you a complete tour about CSS Flexbox layout. In this we will cover almost every aspect about flexible box, Our focus is to cover all properties for the parent element which is also know as flex container and the child elements as will which is called flex items in term of flex-box.  we will provide you demos for every properties with some brief so that you can understand it very easily. First of all i am going to clear what will be my today's agenda: Introduction - What is Flex - Why we need Flex Flex Syntax & Properties - Flex Display - Flex-direction - Flex-wrap - Flex-flow - Justify-content - Align-items - flex: none | flex-grow flex-shrink flex-basis - Flex order We love FloatsIt’s a question not a statement. Nowdays with floats we are facing too many issues that needed to fix but before fixing lets find out what are the issues currently we are facing with elemenets floats. • Weird behaving • Clearfix • Cross- browser issues • Parent container breaking • Content spill over

What you want to change?

- Flexible parent container - No floats Hack - no clear fix - adjustable child container

What is Flex?

CSS Layout Module - Flexbox offers greater control over arranging components of web pages items along one axis. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. - Flexbox or Flexible box is the css3 property - Flexbox is the layout mode - Improvement over the Floats - It helps in displaying the elements on the page as per - Ability to make all neighboring items the same height - It helps in achieving the grid layout - Easy horizontal and vertical centering - Ability to change the display order of the items independent of the html soruce

Let’s Meet the Flex (Flex Vocabulary)

Flexbox Container {}

You can create a flex container by setting the ele’s display property to flex|inline-flex .flex-container{ display: flex; }

.flex-container{ display: inline-flex; } Display: flex creates a block-level flex container Display: inline-flex creates a inline-level flex container

Flex items {}

applying the flex display mode turns the child elements of the flex container into flex items

Note: You can turn any flex item into a flex container by setting its display to flex (resulting in nested flexbox)

Flex Container - Properties {}

Flex container properties allow you to control how items appear within the container flex-direction row | column | row-reverse | column-reverse

Flex items {}

FFlex items line up along one axis Main axis -or- cross axis The main axis is the flow direction you’ve specified for the flex container. The cross axis is perpendicular to the main axis Note: axis direction is specified t the direction of the writing system in use. For Example: write In horizonally oriented languages - ‘row’ would align items horizontally. Vertically oriented languages - ‘column’ would align items vertically When flex-direction is set to row, the main axis is horizontal and the cross axis is vertical

When flex-direction is set to column, the main axis is vertical and the cross axis is horizontal

flex-wrap (flex-direction: row;) { }

nowrap(default) | wrap | wrap-reverse. When wrapping is disabled, flex items squish if there is not enough room, and if they can’t squish any further, may get cut off if there is not enough room in the viewport.

1 ---------------------------------- 10

#container { display: flex; flex-direction: row; flex-wrap: wrap; } .box { width: 25%; }

justify-content (flex-direction: row;) { }

flex-start | flex-end | center | space-between | space-around.

Flex items are, by default, as wide as they need to be to contain the element’s content. The justify-content property defines how extra space is distributed around or between items.

justify-content (flex-direction: column;) { }

flex-start | flex-end | center | space-between | space-around.

Flex items are, by default, as wide as they need to be to contain the element’s content. The justify-content property defines how extra space is distributed around or between items.

align-items { }

flex-start | flex-end | center | baseline | stretch

The align-items property allows you to arrange items on the cross axis (up and down when the direction is row, left and right if the direction is column). Note: you must specify a container height

align-content { }

flex-start | flex-end | center | space-around | space-between | stretch

The align-content property applies only when there are multiple wrapped flex lines .

flex-grow { }

Value: number Default: 0

The Markup 1 2 3 4 5 The Style .box{ flex: 1 1 auto; } A flex-grow value of “3” means the item receives three times the amount of space than the remaining items set to flex-grow:1 .box4{ flex: 3 1 auto; }

flex-shrink { }

Value: number Default: 1

When flex-shrink is 0, items are not permitted to shrink and may hang out of their containing element Flex items stop shrinking when they reach their minimum size (defined by min-width/min-height). .box { flex: 0 1 100px; }

flex-basis { }

Value: length | percentage | content | auto Flex-basis defines the starting size of an item before any wrapping, growing or shrinking occurs. It may be used instead of the width property (or height for columns) for flex items. By default, flex-basis is set to auto (width/height value of item size) If item’s size is not defined or set to auto - flex-basis uses the content width.

Flex order { }

Value: integer | Default order value is ‘0’ The order property give the ability to display items in an order that is different from the order in the HTML source code. If items have the same order value = laid out in order they appear in code If items have different order values = arranged from the lowest order value to highest. .box3{ order: 1; }

.box2, .box3{ order: 1; }

.box5{ order: -1; }

Its all about Flexbox, Hope you liked it. I am attaching a PPT as well with demo & download link. Demo Download PPT File Read the full article

[css3transitionblog-blog]

Lamp On Off Animation Using CSS

Hello friend today with this article I am going to share with you a very beautiful Lamp On Off Animation Using CSS. Here you will get a Lamp and a button when you click on button Lamp will open and close. It is a just like a game as we play with our siblings to on off the bulb using switch same here I am using a hidden checkbox operating threw a label where whenever we click on Label Off lamp or Bulb will be Animate to brighter that means lamp is on now and again when we click its gone off shade of light that means it is off now. This bulb on off animation is a repetitive process on each click. Before proceeding to coding part I would like to share with you my last two awesome article that will definitely blow your mind by their effect. Please this out here as link given below: - Image hover with slide out title - I Love You Text Animation So now lets start coding for this bulb on/off animation using css: HTML Structure: CSS Stylsheet: @import url(http://weloveiconfonts.com/api/?family=entypo); *, *:before, *:after { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #lamp { position:relative; width:100vw; height:100vh; overflow:hidden; } input, input + label { position:absolute; bottom:3rem; width:4rem; height:4rem; } input + label {right:3rem;} input { opacity:0; z-index:9; cursor:pointer; } input { right:3rem; } input { right: Read the full article

[css3transitionblog-blog]

Cool Login/Sign-up form Using jQuery and CSS

Hello friends with this article I am going to share with you a very interactive Login/Sign-up form Using jQuery and CSS. As we knows contact forms, login form and sign up form are the key things to gather use data to stay connect with them. So when we use attractive html contact form or html login/sign-up use get attracts towards and shows intreset in filling these html forms. Login forms are everywhere not in the set against off from the web. Are you using the social networks? You must go through login form of some sort. Do you have an email? Did you colleague any forums? Did you attempt to depart a comment something behind a WordPress site? To profit entry to all in the region of the internet, the chances are you will have to go through some sort of login process. You will probably have to register first, sign going on or depart some have the funds for advice at the by now. You will have to use some sort of login form to perform every one single one upon the internet. So what get Login Forms have to get your hands on once HTML and CSS? They are both the indispensable parts of the Login Forms. HTML (HyperText Markup Language) is a okay markup language used to make web pages. HTML elements are building blocks of all websites. CSS (Cascading Style Sheet) is a language used for describing the state and formatting of a document written in a markup language. Such as HTML! Here I will break you for a while to show you my two previous articles it will feel you good too: Read the full article

[css3transitionblog-blog]

Button Decoration using Pseudo Elements

Hi friends here I am sharing a article for Button Decoration using Pseudo Elements with css. It is very beautiful and simple decoration using css on pseudo elements. As we all knows simplicity is the best beauty so by following this concept I have created this button decoration. You can use this button on very special occasion or place for your website. Before briefing on coding for I have my two amazing previous article which may be beneficial for you too: Cool Login/Sign-up form Using jQuery and CSS Lamp On Off Animation Using CSS You can use this button with your home page banner or you can make your contact or registration form more beautiful so that it can catch more users towards your website data gathering forms like sign-up form and contact us form. Button are the most useful elements for the website or web application it hold the most call to action command in your entire website and web application. Now, I am going to show you coding for this button: HTML Structure: bttn.css CSS style sheet: body { background: rgb(242, 242, 242) none repeat scroll 0 0; padding: 30px; } .btn-wrapper { cursor:pointer !important; left: 50%; margin: 0 auto 0 -268px; max-width: 536px; position: absolute; top: 37vh; width: 100%; } .btn-wrapper:after { background: #0188fd none repeat scroll 0 0; border-radius: 75px; content: ""; height: 100%; position: absolute; right: -21px; top: 8px; width: Read the full article

[css3transitionblog-blog]

Mouse over Parallax or 3D Tilt Effect

Hello friend i am going to share a very amazing Mouse over Parallax or 3D Tilt Effect with you using jquery and css. I will find me using tweenMax jQuery plugin to give you a layered effect as 3D Tilt Effect. It is a fantastic effect sure you would like to add it with your website to enhance its beauty. Before briefing more I will very quickly a quick look for my recent two article hope you love to see them too: Button Decoration using Pseudo Elements Cool Login/Sign-up form Using jQuery and CSS Lets Start know it in some deep :  as you can see when you hover your mouse cursor anywhere on the screen all over effect you will get is all the layers Text and Image float over like having a 3D Tilt effect. Here what acts to produce this 3d effect is tweenMax jQuery plugin which actually use “preserve-3d” transform style to make or reflect this 3D effect. Preserve-3d transform style called by a custom javascript as you see in index.js javascript file. So without wasting any time lets start code over here : HTML Struture: Css3 Transition Parallax Effect, 3D Tilt Effect CSS Style Sheet: html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } html, body { height: 100%; width: 100%; } body { background: rgb(41, 41, 41) url("https://wallpaperscraft.com/image/grass_leaves_drops_background_blur_spot_67968_1920x1080.jpg") no-repeat scroll 0 0 / cover ; color: rgb(255, 255, 255); font-feature-settings: Read the full article

[css3transitionblog-blog]

Bouncing Text Animation Using Only CSS

Hello friends, today I am sharing a beautiful Animated Text Using Css Only effect where I just played little bit pseudo element in css using css3 advance properties to produce this Text Animation. Here in beautiful text animation I am counting each letter used here to apply a specific animation time to each letter so that we can arrange their animation like they are randomly bouncing with animation property Bounce as showing in code animation: bounce .3s ease infinite alternate; Pseudo Element used to provide each letter different animation time as you can see in code given below: h1 span:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; } h1 span:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; } h1 span:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s; } h1 span:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s; } h1 span:nth-child(6) { -webkit-animation-delay: .5s; animation-delay: .5s; } h1 span:nth-child(7) { -webkit-animation-delay: .6s; animation-delay: .6s; } h1 span:nth-child(8) { -webkit-animation-delay: .7s; animation-delay: .7s; } h1 span:nth-child(9) { -webkit-animation-delay: .8s; animation-delay: .8s; } h1 span:nth-child(10) { -webkit-animation-delay: .9s; animation-delay: .9s; } h1 span:nth-child(11) { -webkit-animation-delay: 1s; animation-delay: 1s; } h1 span:nth-child(12) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; Read the full article

[css3transitionblog-blog]

Cool Mirror Effect Animation

Hello friend I found a Cool Mirror Effect Animation which seems very cool to me that I decided to share it with you too. Hope you like it. Here you are goanna get 3 demos for mirror effect. Each Demo will let you feel different and beautiful animation reflecting mirror effect. Before Briefing more I would like to share my to last articles, hope you like them too: Bouncing Text Animation Using Only CSS Mouse over Parallax or 3D Tilt Effect The idea is to mirror an image within the context of a slideshow or just as ornamentation. For showcasing this, weregarding using a slideshow taking into account three easy examples, each one showing a possibility of the effect. Demo 1: Demo 2: Demo 3: In the first demo we dont remove the mirror images totally, in the second one we vibrancy a vertical example, and in the last one we conduct yourself back a mixture mode and sever the two sides visually. The last example in addition to has a bit of society, just concern regarding behind your mouse to way of bodily the effect. Demo Download Read the full article

[css3transitionblog-blog]

Responsive Content Block with Hover Effect

Responsive Content Block with Hover Effect Here I am sharing a responsive content block with several effects on it. In this post you will see on hover content block and icon will be zoom in, it can be a good option for your next design project to implement it with. Before sharing more details i would like to share my recent top articles with you, hope you like it. Cool Mirror Effect Animation Bouncing Text Animation Using Only Css Coming to the article again, here you will find three things: 1: Responsive Content block or responsive grid. 2: Scalable Svg Icons On hover. 2: Background color Animation on hover. Along with this you will also learn how to use psuedo elemetns to make Arrow and provide different color (i have provide Quality Material Color to each Content Block) to each content block background. You can use these content block with your website to make it more effective and beautiful. you can place your service with these responsive grid to provide a quick view of your service that you provide along with relative icons, can be find easily from flaticons or iconfinder. Now i will let you know how to integrate this Responsive Content Block with Your website  with your website: LETS start coding: HTML Structure:   Loader Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.   Slider Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Read the full article

[css3transitionblog-blog]

Order Progress Bar with Animated steps Using CSS only

Fantastic Order Progess Bar with Animation steps using Hello Friends after a long time I am going to share with you a Fantastic Order Progess Bar with Animation steps using css only, in this post you will get all animation will be done only using css nothing javascript included. It is just a very beautiful Process bar where you can click any steps with their related information in it. Top Progress  bar will also animate as per step mention on it. Before going in more brief I would like to share with you my recent top most article with you, hope fully you will like it: Responsive Content Block with Hover Effect Cool Mirror Effect Animation Lets start knowing about this article more: There are two part in this article viewport as you can see 1: Top section/ Progess Bar 2: Bottom Section/ Content Area Top section include 5 click points each have different info and can we clicked to reach on desired section anytime or in anystep. When we click on Process step any section related content section will drop in bottom with content area. To activate desired content area here we are using lavels with hidden radio input field to operate it relatively. To know better follow the code structure as given below: HTML Structure: Start order Prepare gift Pack gift Decorate box Send gift Start order Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Read the full article

[css3transitionblog-blog]

Delete Button Icon Animation

Today with this article I am going to show you a beautiful Delete Button Icon Animation using CSS3. Here you will get a trash icon when you hover on it button expands and show trash icons along with delete text after performing click on button its ask a confirmation message "R you sure?" with blue background process follow a smooth text and background animation. On confirmation success message appears with green background which denotes process is successful. Before going in more brief i would like to share with you my previous most popular articles hope you like it too: Order Progress Bar with Animated steps Using CSS only Responsive Content Block with Hover Effect Now i will explain you in some more brief to way you out it more better: When you Hover on Trash Icon with expand to 120px and delete text appears and when you click on it "confirm" class is added behind with javascript if already having confirm class "done" class will be added. when "mouseenter" is active here will be two case, one is click perform and another is just mouseenter: If condition one : is matched then on mouseout setTimeout function will be activated due to which after 3 sec both "confirm" and "done" active will be remove to set default position for trash icon. If condition two: found on mouseout by default it set it default position for trash icon. Let Read the full article

[css3transitionblog-blog]

Beautiful UI Grid for Team

Beautiful UI Grid for Team Hello friends I am going to share with you a very Beautiful UI Grid for Team  using Pseudo element in css. You can use this with you team presentation for your website or either you can use it to show your business service that you provides to your clients or customers. Many places you can use it to make your website beauty more enhance. These beautiful image hover effect can be used with image gallery and as a simple hover effect for images or as a block hover effect. Here you will se how I am using many new css properties like display: flex; flex-direction: row; and word flex-wrap: wrap; . where display: flex; is used by developer to make their multi grid system in row by using property flex-direction: row; that assign a row to grid with same height. It is a very usefull properties in nowdays. In this post I am using to assign particular css property to a particular grid column by replacing nth child value to grid number. Pseudo element is used to provide various effect on hover  like when we hover on it faded image will get more clear and zoom in more and social media icons will appear slowly with transition using transition properties. Now Read the full article

[css3transitionblog-blog]

Payment Checkout Multi-Step form

Payment checkout multi-step form are nowadays in most demand as everyone wants to put their product threw digital market to their customer, because sell purchase process is way easy in online market in compare to local Market. That’s why reason a good e-commerce website and a good payment checkout process to ease-in user flow to get customer payment details. In this post you will get a beautiful accordion checkout form with multi-step. Where in 1st section you will get a login/signup section from where user can continue through guest account or he can login/signup to continue for payment checkout form. In 2nd step user will go through a shipping and billing details form after that user will found a 3rd step of the form where he will get three options to select one as desire delivery option. Second last option that is 4th option where customer will get a beautiful credit/debit html form to fill their payment method details after fill this beautiful form on continue customer have a summary of ordered item to quick edit if he want else he/she can continue to payment final. There are five steps given to complete this payment checkout Procedure: 1st: Login/signup form 2nd: Billing information form 3rd: Shipping Option 4th: Payment details Form 5th: Finalize order Key things that I have used here in this beautiful payment checkout form: when we are create something using html and css we must follow the latest to trends that are going on. Read the full article

[css3transitionblog-blog]

Pure CSS custom checkboxes

I am here in this post with a beautiful custom checkbox with keyframes animation. As we knows today website are highly customized with advance CSS weather with the help of pseudo elements or some advance CSS properties and attributes like keyframes, transition and transform properties. These properties as highly supportive to cross-browser. Here you will get how to use keyframes and how to use transition and transform CSS3 properties to get best effect that will enhance the beauty of your website and web application. As we know default checkbox and radio buttons are very old fashion in design in compare to latest trend as going. So customization of these default radio and checkbox input types with beauty without losing its light weight working and function with cross browser usability is a challenging task. Don’t worry stay update with us get the best custom checkbox with 100% working cross-browser working keep in mind. Lets take a quick look what I am covering in this Pure CSS custom checkboxes : keyframes transform animation transition As you can see in above we are covering css3 properties in this custom checkbox animation. Let’s Read the full article

[css3transitionblog-blog]

Profile Card Design

In this post you going to get a beautiful profile card design template. Where I am using material design approach to make this Profile Card template look more beautiful and eye catchy. In this material design Profile card you will get three section. In this User Profile page in html first section top most section of profile card is a profile image with padded 10px and rounded in edges to provide circular shape to image. In 2nd section you can put your name, place and designation that you have or for the person you are using this card. In 3rd section you can put your relevant skills. This profile card can be used with your personal blog website or with your portfolio. This is a cool way to embed your personal information that you want to share with peoples. Let’s code this beautiful Profile card: HTML code #035 - Profile Card Design PRO Rahul Yaduvanshi Nodia, U.P. User interface designer and front-end developer Message Following Skills UI / UX Front End Development HTML CSS JavaScript React Node CSS Code @import url('https://fonts.googleapis.com/css?family=Montserrat'); * Read the full article

[css3transitionblog-blog]

Chat Application UI Design and html with smooth scrollbar

Hi, I am sharing a beautiful chat application UI template. Hope it will full your requirement for chat application html template. It is open source, custom design and htmlise by me for free use. You can use it like inbox as mailer and inbox for your social media application. I have used a very smooth scrolling scrollbar here you can separate chat box to use scrollbar in different project. You browser window will scroll smooth with help of this scrollbar plugin based on javascript. This plugin also know as mCustomScrollbar   find it online with same name. As the uses of internet keeps growing, everybody need a kind of chat platform or chat system. No matter if it is a chat support portal or a full blown chat application. So with the help of this tutorial I am going to share a beautiful chat application UI. In this html chat box you will get a smooth scrollbar and interactive chat box user interface. Here we are building a chat box html template where you can find every basic chat application functionality like if user is online then a green singal will be indicating and if user away orange signal indicating, ligh gray circle if user is offline. Let start doing code and see how I have implemented this chat application html using less css. Header component: Footer Component: (function($){ $(window).on("load",function(){ $(".message-list, .chatter, .comment-section, .storyline").mCustomScrollbar({ Read the full article