Categories
CSS HTML

How to make HTML page footer stay at bottom of the page using CSS?

In our application or project, if the pages has less content or data, then the page footer will come up and it will not look good. Earlier to overcome this problem we need to do some work around with CSS or we have write custom java-script/jQuery code. After the introduction of Flexbox its very simple to do this. 

How to make HTML page footer stay at bottom of the page using CSS?
Categories
CSS HTML

How to Center align div vertically using css?

During the early days of HTML development, to vertically center align a div or an element we used lots of methods or technique to achieve this. We used CSS position property in some cases and in some cases to do it in dynamically we used JavaScript to vertically align a div or an element. But in modern Flex-box solution it is the easy to do this. Just by using CSS ” justify-content: center” to the parent element to align the content to the center (vertically) of it. Most of the modern browser supports this CSS property.

How to Center align div vertically?
Categories
CSS HTML Jquery

Adding space/padding between options of select tag in IE browser

By using css properties we can add space in between options of a select element and it will work well in browsers like Firefox and Chrome. However, it will not work in IE. We can’t style “<option>” elements in Internet Explorer with most of the css properties. Only background and font color property will work in IE other proprties will inheritfrom the Windows operating system.

Adding space/padding between options of select tag in IE browser
Categories
CSS HTML

Vertically align text next to an image with CSS

If we have image follwed with text and need to be aligned verically, we can do this by simply setting “vertical-align:middle;” to image or we can use css property flexbox for this type of layout. Most of us will struggle with the middle aligment of images with text.

Vertically align text next to an image with CSS
Categories
CSS HTML

Change HTML placeholder text color

To change the text color of the HTML placeholder we can use ::placeholder css property. Most of the modern browsers support this pseudo-class. But still it requires some separate rules for each browsers.Here are the ways to declare css for different browsers

Change HTML placeholder text color
Categories
Background CSS

CSS background shorthand property

The background shorthand property is a method to specify the values of multiple CSS background properties all together. Shorthand properties is a CSS property that allow you set all values together. Using a shorthand property, you can write more accute style sheets.

Categories
CSS

Disable text selection highlighting using CSS

To disable/prevent text selection in your pages you can use CSS user-select property. By using this property you can specifies whether the text of an element can be selected or not.

Categories
Background CSS

Background Image Change on every 5sec using css3

For those who looking to change background image on every 5sec or some period of time this post will be very useful. In the past we have done this using some scripts like jquery, now you can do this with few lines of CSS3.

Categories
Background CSS Jquery

Background Image Change on every 5sec using Jquery

In this article, will show you how to change background image on some period of time . So here is the tutorial to apply this kind of effect to your web project. You can achieve it in few lines of jquery. Use it and make  your website more beautiful.