CSS – Extreme Web Designs https://theextremewebdesigns.com/blog Web Design and Web Development Tue, 06 Dec 2016 10:22:33 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.5 156673191 Flip Text Horizontally and Vertically Using CSS3 Easily https://theextremewebdesigns.com/blog/flip-text-horizontally-and-vertically-using-css3-easily/ https://theextremewebdesigns.com/blog/flip-text-horizontally-and-vertically-using-css3-easily/#respond Tue, 06 Dec 2016 10:22:33 +0000 https://theextremewebdesigns.com/blog/?p=4028 Ever wondered how to flip text horizontally and vertically without javascript? In this article, I will share easy ways to achieve the flip text effect just by using CSS/CSS3.

Flip Text Horizontally Using CSS/CSS3

Let’s say that we have some text in a div and we would like to flip this text both horizontally. Let’s see how to do this.

<style>
.holder {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ddd;  
}

.horizontal-flip {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
</style>


<h2>Horizontal Text Flip:</h2>
<div class="holder horizontal-flip">
1234567890
</div>

Flip Text Vertically Using CSS/CSS3

Now lets flip the same text vertically just by using CSS.

<style>
.holder {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ddd;  
}

.vertical-flip {
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
</style>


<h2>Vertical Text Flip:</h2>
<div class="holder horizontal-flip">
1234567890
</div>

Simple, isn’t it?

Do you know of any other ways to flip text using just CSS? Feel free to suggest by commenting below.

]]> https://theextremewebdesigns.com/blog/flip-text-horizontally-and-vertically-using-css3-easily/feed/ 0 4028 CSS Image Rollover with Example https://theextremewebdesigns.com/blog/css-image-rollover-with-example/ https://theextremewebdesigns.com/blog/css-image-rollover-with-example/#respond Sun, 16 Dec 2012 18:26:16 +0000 https://theextremewebdesigns.com/blog/?p=1928 If you would like to create rollover effect by using only CSS i.e. a pure CSS Image Rollover effect, then this article is for you. In this article by using a simple example, I am going to show how to create Rollover effect for an image by simply using CSS and without any javascript or jQuery.

How to create CSS Image Rollover Effect?

Let’s look at the demo first:

Before Rollover:

After Rollover:

Example of Image Rollover using CSS

Let’s assume that you have a main “container” div that contains both the images i.e the image that needs to be shown by default and the roll over image as well. Take a look a the simple, easy to understand HTML & CSS code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example of Image Rollover using pure CSS</title>

<style type="text/css">
.container {
width: 300px;
}

.container .img_rollover {
width: 300px;
display: none;
}

.container:hover .img_rollover {
display: block;
}

.container:hover .img_default {
display: none;
}
</style>
</head>

<body>

<div class="container">
<img src="images/1.jpg" width="300" height="300" class="img_default">
<img src="images/2.jpg" width="300" height="300" class="img_rollover">
</div>

</body>
</html>
Simple, isn’t it?

Do you know of any other ways to make CSS Image Rollover Effect? Feel free to suggest by commenting below.

P.S:  If you would like to find out how to achieve Image Rollover effect using jQuery, then read my article on jQuery Image Rollover effect with example

]]> https://theextremewebdesigns.com/blog/css-image-rollover-with-example/feed/ 0 1928 Align text to bottom of div using CSS Example https://theextremewebdesigns.com/blog/align-text-to-bottom-of-div-using-css/ https://theextremewebdesigns.com/blog/align-text-to-bottom-of-div-using-css/#respond Fri, 25 May 2012 07:44:32 +0000 https://theextremewebdesigns.com/blog/?p=578 Here is a neat trick to align the text or the content of a div to the bottom portion of the div using CSS.

Example to Align text to bottom of div using CSS

For the sake of example, let us assume that we have a div with ID “my_div”. This div contains another div with ID “my_div_content”. This div actually contains our text that we want to align to bottom of “my_div”. So let’s see how this can be achieved.

Example: Align Text to bottom of Div using CSS

<style type="text/css">
#my_div { position: relative; }
#my_div_content { position: absolute; bottom: 0; left: 0; }
</style>

<div id="my_div">

<div id="my_div_content">
<h1>Some title</h1>
Content goes in here.
</div>
</div>
 That’s it!

Do you know of any other ways to align text to bottom of div using CSS? Feel free to suggest by commenting below.

]]> https://theextremewebdesigns.com/blog/align-text-to-bottom-of-div-using-css/feed/ 0 578 Remove dotted outline using CSS in Firefox on Buttons, Links https://theextremewebdesigns.com/blog/remove-dotted-outline-using-css-in-firefox-on-buttons-links/ https://theextremewebdesigns.com/blog/remove-dotted-outline-using-css-in-firefox-on-buttons-links/#respond Fri, 25 May 2012 06:26:45 +0000 https://theextremewebdesigns.com/blog/?p=576 Here are short super tricks to remove dotted outline using CSS in Firefox on Buttons & Links.

Remove Dotted Outline using CSS in Browsers

//Remove dotted outline on buttons

button::-moz-focus-inner {
border: 0;
}

//Remove dotted outline on link

a:focus {
outline: none;
}
Simple, isn’t it?

Do you know of any other ways to remove dotted outline using CSS for other browsers? Please feel free to share by commenting below.

 

]]> https://theextremewebdesigns.com/blog/remove-dotted-outline-using-css-in-firefox-on-buttons-links/feed/ 0 576 Include CSS in CSS https://theextremewebdesigns.com/blog/include-css-in-css/ https://theextremewebdesigns.com/blog/include-css-in-css/#respond Fri, 25 May 2012 06:03:56 +0000 https://theextremewebdesigns.com/blog/?p=569 Include CSS in CSS with just 1 line of code. Read on to find out more about this nifty little trick.

Include CSS in CSS

Let us say that you have a main CSS file called “main.css” that contains all the styles for your website. Now you want to include a CSS file that works as a CSS Reset (If you do not know what CSS Reset, is then read more about it here), you can do it the following way, assuming that your CSS Reset file is name as “reset.css”:

//Contents of main.css

@import url("reset.css");

h1 { }
h2 { }
p { }

@import url(“reset.css”); is the only line of code you need to include css in css. You can apply the same method to include multiple css in a single css file. Following is an example:

//Contents of main.css

@import url("reset.css");
@import url("colors.css");
@import url("forms.css");

h1 { }
h2 { }
p { }

So as you can see, all you need is just 1 line of code whenever you want to include CSS in another CSS.

]]> https://theextremewebdesigns.com/blog/include-css-in-css/feed/ 0 569 Vertically align text with image using CSS https://theextremewebdesigns.com/blog/vertically-align-text-with-image-using-css/ https://theextremewebdesigns.com/blog/vertically-align-text-with-image-using-css/#comments Thu, 24 May 2012 16:20:08 +0000 https://theextremewebdesigns.com/blog/?p=566 When working with web design, some times it might be desirable to maintain an even proportion, be it layout or be it placement of elements in the page. In such a context, it would be helpful to vertically align text. So here’s a neat trick to vertically align text with image using CSS.

Example to Vertically align text with image using CSS

Let’s assume that we have a div and it contains an image and some text. We would now like to vertically align the text with this image. We can do this in the following way:

<div>
<img style="width:50px;height:300px;vertical-align:middle;">
<span style="text">Hello World!</span>
</div>
Your Turn!

Do you know of any other ways to use CSS to vertically align text with image? Feel free to share by commenting below.

]]> https://theextremewebdesigns.com/blog/vertically-align-text-with-image-using-css/feed/ 1 566 Center Div Horizontally Using CSS Example https://theextremewebdesigns.com/blog/center-div-css/ https://theextremewebdesigns.com/blog/center-div-css/#respond Tue, 10 Apr 2012 06:40:20 +0000 https://theextremewebdesigns.com/blog/?p=543 In this article, I am going to show you a very simple way to center div using css.

How to Center div using CSS:

Before I show you the markup, let’s quickly look at the output:

Center div CSS

Example: Horizontally Center div using CSS:

<style type="text/css">
#outer {
background-color: #930;
padding: 15px;
width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#inner {
color: #000;
background-color: #FFCFB9;
padding: 10px;
width: 200px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>

HTML:

<div id="outer">

<div id="inner">
This is inner div.
</div>

</div>

Note that for the demo purposes, I have maintained the width of the outer div at 500px. You may remove/change it as you need.

That’s it!

Do you know of any other ways to Center div CSS? Feel free to share your thoughts by commenting below.

]]> https://theextremewebdesigns.com/blog/center-div-css/feed/ 0 543 Center li in ul using CSS Example https://theextremewebdesigns.com/blog/center-li-in-ul-using-css/ https://theextremewebdesigns.com/blog/center-li-in-ul-using-css/#respond Tue, 10 Apr 2012 06:04:46 +0000 https://theextremewebdesigns.com/blog/?p=532 When working with unordered lists (ul) using HTML & CSS, you might have seen that the ul li stack vertically. But you may want them to stack horizontally and better yet, align them all horizontally so that all the li center in ul. So do you know how to center list item in the unordered list using CSS? If not, don’t worry In this article, I am going to show you a very simple way to center li in ul using CSS and thereby fabulous CSS menu and center the list items inside the list using an easy example.

How to Center li in ul using CSS – Example

Before I show you the HTML and CSS required to center the list items in its parent unordered list using CSS, let’s look at the output:

Center li in ul CSS

So this example assumes that we have a div and we are using an unordered list (ul list) with some list items (li items) in it. It’s upto you to decide how many li items you want to center in it. There’s no limit as such. But for the sake of the example to center li in ul using CSS, I am going to assume that we have 6 li items.

The following is HTML markup. You may use it and change it as you need it.

<style type="text/css">#nav {
background-color: #930;
padding: 10px;
margin-left: auto;
margin-right: auto;
width: 500px;
margin-top: 50px;
}

#nav ul {
text-align: center;
padding: 0;
margin: 0;
}

#nav li {
display: inline;
list-style: none;
padding: 10px 5px 10px 5px;
}

#nav a {
color: #930;
text-decoration: none;
padding: 5px;
background-color: #FFBE9F;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
}

#nav a:hover {
background-color: #FFC9AE;
}
</style>

HTML:
<div id="nav">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Sixth link is long link</a></li>
</ul>
</div>
Your Turn!

Do you know of any other ways to center li in ul using CSS? Feel free to share your comments below.

]]> https://theextremewebdesigns.com/blog/center-li-in-ul-using-css/feed/ 0 532 Center Div In Div Using CSS Example https://theextremewebdesigns.com/blog/center-div-in-div/ https://theextremewebdesigns.com/blog/center-div-in-div/#respond Mon, 19 Mar 2012 12:06:27 +0000 https://theextremewebdesigns.com/blog/?p=384 Ever wanted to center Div in Div using CSS? In this article, I am going to show you a very simple & easy little trick to use CSS so that you can easily center a div in another div.

How to Center Div in Div using CSS – Example

For the sake of example, let’s assume that we have 2 Divs & we would like to center the inner div inside the outer (main) div. Here is the CSS & HTML code:

<style type="text/css">
#content {
width: 100%;
}

#text {
width: 80%; /*Change this value to a suitable one*/
margin-right: auto;
margin-left: auto;
}

</style>

<div id="content">
<div id="text">Try selecting all this text. You will see that all of it is unselectable.</div>
</div>
Very simple, isn’t it?

Do you know of any other ways to center div in div using CSS? Feel free to suggest by commenting below.

]]> https://theextremewebdesigns.com/blog/center-div-in-div/feed/ 0 384 Set Cellspacing Cellpadding in css https://theextremewebdesigns.com/blog/set-cellspacing-cellpadding-in-css/ https://theextremewebdesigns.com/blog/set-cellspacing-cellpadding-in-css/#respond Mon, 19 Mar 2012 11:53:38 +0000 https://theextremewebdesigns.com/blog/?p=379 Ever wanted to Set Cellspacing Cellpadding in css but didn’t know where to begin? Worry no more. In this article, I am going to show you how to easily set cellspacing, cellpadding  in CSS. The CSS & HTML source code are provided & you can try experimenting with the values to suit your purpose. So read on to find out how to Set Cellspacing Cellpadding in css.

How to Set Cellspacing Cellpadding using CSS – Example

Example: Following is the code to Set Cellspacing Cellpadding using CSS

<style type="text/css">
/* For Cellspacing*/
table
{
border-collapse: collapse;
}

/* For Cellpadding */
table td, table th
{
padding: 0;
}
</style>
Simple, isn’t it?

If you know of any other ways to set cellspacing and cellpadding in css, please feel free to share by commenting below.

]]> https://theextremewebdesigns.com/blog/set-cellspacing-cellpadding-in-css/feed/ 0 379