CSS3 Tricks to Align Content Vertically

The last method to vertical centering is by using Flexbox. Flexbox is a new module in CSS3. It offers a more straightforward method for aligning content. To center the content vertically in flex box, simply add align-items: center;as follows, and that’s it.

http://jsfiddle.net/tfirdaus/tjn66evy/embedded/result,css,html/

Keep in mind that Flexbox some browsers only support partials feature of the Flexbox module such as Internet Explorer 10, Safari, 6, and Chrome 27 and below. Hence, similar to the trick with CSS3 Transform, make sure that the effect falls nicely in these browser.

Making image width and height as sreensize

<body onresize=”myFunction();”>

</body>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script type=”text/javascript”>
function myFunction() {
var img_obj = $(‘.banner-main’).find(‘img’);
var w = $(window).width();
var h = $(window).height();
var mar_number = $(“body”).css(“margin-top”).replace(/[^0-9]/g, ”);
$(img_obj).attr(‘height’,h – mar_number);
$(img_obj).attr(‘width’,w);
}

jQuery(document).ready(function() {
myFunction();
});
</script>

CSS3 Button Nice Effect

.btn a {
	padding:5px 20px;
	color: #444444;
	background: transparent;
	line-height: 100%;
	border: 2px solid #444444;
	-webkit-transition: color 300ms ease, background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
	transition: color 300ms ease, background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
	-webkit-box-shadow: inset 0 0 0 0 #444444;
	box-shadow: inset 0 0 0 0 #444444
}


.btn a:hover {
	background: #444444;
	color: white;
	border-color: #444444;
	box-shadow: 300px 0 0 0 #444444 inset;
	text-decoration:none;
}

CSS: transition from display: none to display: block on “hover”

Transition from display: none to display: block is inpossible in CSS on "hover". But there is a workaround.

“keyframes” is the solution.

1. define a “keyframe”:

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}

@keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}

2. Use this “keyframe” on “hover”:


div a span {
display: none;
}

div a:hover span {
display: block;

-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-name: fadeIn;
animation-duration: 1s;

}