Easy way to vertically center anything by CSS3

Vertical align by CSS is the thing that I always struggle to fix. Some times succeed and some times not depends on DOM structure of that component. Time, when we use extensively TABLE for layout structure then it was super easy to align element vertically. But the time of CSS when we start DIV base layout then it has become some challenging staff to do.

Anyway, great technique of CSS3 we can solve it with some features like Flex Box, Grid Layout will make this kind of thing even easier. But there is one other way to solve it and it need only three lines of code. Following are the lines:

.do-vertical-center{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform:translateY(-50%); /* prefix for IE 9 */
	-webkit-transform:translateY(-50%); /* prefix for Safari and Chrome */
}

FYI: When you use position absolute you can apply relative position on parent DOM so that it will positioning from that parent but it depends on your structure.

I hope it will help you and save some time to fix Vertical alignment without table. Indeed!

How to style radio button and checkbox

Hello there, hope you are doing well! Today I am going to present how to style radio button and checkbox.

Ever wondered! to customize radio button and checkbox, but without JavaScript? Thanks to CSS3 you can! With CSS3 we can customize web presentations to be almost anything we want it to be. In this post, as the title says, I am going to customize the look of radio button and checkbox.

How to style radio button and checkbox

DOM structure for Radio button

<label class="custom-radio-button">
 <input type="radio" /> 
 <span class="helping-el"></span>
 <span class="label-text">Customize</span>
</label>

CSS for customize Radio button

label.custom-radio-button input[type="radio"] {
	opacity:0;
}

label.custom-radio-button input[type="radio"] ~ .helping-el {
	background-color: #FFFFFF;
	border: 2px solid #009688;	
	border-radius: 50%;
    display: inline-block;
    margin-right: 7px;
    padding: 11px;
    position: relative;
    top: 3px;
}

label.custom-radio-button input[type="radio"]:checked ~ .helping-el {
    border: 2px solid #009688;
}

label.custom-radio-button input[type="radio"]:checked ~ .helping-el:after {
	background-color: #009688;
    border-radius: 50%;
    content: " ";
    font-size: 33px;
    height: 16px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 16px;
	
}

DOM structure for Checkbox

<label class="custom-checkbox">
 <input type="checkbox" /> 
 <span class="helping-el"></span>
 <span class="label-text">Customize</span>
</label>

CSS for customize Checkbox

label.custom-checkbox input[type="checkbox"] { 
	opacity:0;
}

label.custom-checkbox input[type="checkbox"] ~ .helping-el{
	background-color: #FFFFFF;
	border: 2px solid #009688;	
	border-radius: 2px;
    display: inline-block;
    padding: 10px;
    position: relative;
    top: 2px;
}

label.custom-checkbox input[type="checkbox"]:checked ~ .helping-el{ 
	border: 2px solid #009688;
	background-color: #009688;
}

label.custom-checkbox input[type="checkbox"]:checked ~ .helping-el:after {
    color: #FFFFFF;
    content: "\2714";
    font-size: 20px;
    font-weight: normal;
    left: 2px;
    position: absolute;
    top: -6px;
    transform: rotate(10deg);
}

Conclusion

Alright, so how cool it is, right?🙂

BTW: This technique to customize radio button and checkbox input type and certainly you can enhance the look to be more stunning.

Web design trends for 2016

Just like any other field there are trends in Web Design. Some will change with the passage of time and some will go with out any change.

2015 has been an interesting year for Web Designers. Now let see how 2016 will be for Web Designers.

  • Designers takes inspiration from mobile devices  and started simplifying navigation and hiding it under a hamburger menu. It’s a trend that’s also crept into the desktop version of websites. Placing navigation under a hamburger menu makes a site cleaner and most people are now used to with this. But this isn’t something that works for every site and can reduce discoverability. This is not good for e-commerce sites and news sites, where discoverability of topics and items is critical to the experience.
  • 2016 will also the year of Responsive Web Design. More companies will switch their website to responsive design. So, this year we will see more responsive designs with innovation.
  • Some Web designers design only in the browser. There are benefits to this: cuts development time down, allows you to see the limitations and reactions of the actual browser with regards to the design.  It’s common for Web designers to know how to code at least the front end of websites (HTML/CSS/JS), so designing in the browser makes sense to them.
  • We should all be thanking Google for its  free font collection. Because of the company’s library, utilizing a great looking typeface on a limited budget can be achieved. With varying styles, weights, families, and the like, there is sure to be quite a few typefaces that are suitable for any website.
  • More sites and apps are going with the full-screen forms and input screens instead of it existing in only one small part of the site. Click on “login” and or “contact” and you may be greeted with a full-screen overlay with the form needed instead of being sent to a different page. This trend will be follow in 2016.
  • Carousels seem to be everywhere. They can add visual interest and reduce clutter. But few things to consider like carousels are bad for SEO, because there is no HTML content in carousels. The lack of content means that it’s difficult to get meta information into a page. Most sliders though contain headers that are wrapped in H1, and these change when the slider does and as such, devalue keywords within them.
  • There has been a bit of a revolution over the past twelve months in the form of the adoption of Google’s Material design as a basis for UI presentation and development. This trend reflects the move toward smartphones as the principle and first device used to access the web, over and above the desktop or laptop computer. Expect to see the Material appearing in user interface design across the web, much as happened with Bootstrap in the past.
  • With responsive design pretty much taken over the Web, expect flat design to continue to be a dominate design aesthetic throughout 2016. Not only will there be websites that launch with flat designs, those sites who’ve already embraced the flat design trend will look to make things even flatter.
  • In 2016 I can expect more use of Java Scripts.  JavaScript can be highly functional in that it can be used for many things that other languages can’t. It can help you create great load screens, for example, and other styling elements such as sliders, adding functionality. but, JavaScript can slow down a good site and, users won’t stick around if a site is too slow. There’s nothing wrong with JavaScript. It has a lot of great uses and allows us to do some nifty things on the web. But, you should reduce the amount of JavaScript you use so that it doesn’t make your site painful to view on a mobile device.

 

© copyright https://www.linkedin.com/pulse/web-design-trends-2016-farhan-khan