Posts

Showing posts from January, 2014

Step By Step Creating CSS Speech Bubble With Hover Effect

-
Image
At the moment, I want to share how to make CSS speech bubble without using any image . You might often see chat style like below on the web. Web designer call it speech bubble . Mozilla forum also using this style. How to create it? Just understand following steps! You need a box, I'm using div tag, You need to write some rules for your div tag and add pseudo elements :before and :after . If you want to create CSS speech bubble without border , you can use :before only. But if you want create it with the border, you need :before and :after . Here step by step to create CSS speech bubble . #1 Create div tag and give it class. For example, I give it class "bubble". <div class="bubble">This is CSS speech bubble</div> Place that HTML code between <body> and </body>. #2 Now you need create CSS rules. You can write CSS rules between <head> and </head> Type these rules. <style type="text/css">...
Read more

Where To Download All Versions Included Old Versions Of Firefox?

-
Image
Sometimes there are internet users want to use old version of firefox. They want to use old firefox because several reasons such as hardware resource reason, or for web designer, the old version of web browsers are needed for checking cross browser compatibility for their web pages. So, where to download the old versions of firefox? I know so many sites on internet share their download. But we can not trust them as such. I worry if the program has been injected by viruses or other malware. It's better to download software from its official publisher. Firefox browser created by Mozilla Foundation. It has official homepage https://www.mozilla.org . So you can download all firefox versions from there. Now, the most up-to-date version of firefox is version 26 that you can download for free from Mozilla's homepage  www.mozilla.org . Firefox 27 beta version also available download. But, you can't download it via mozilla homepage. You need to access Mozilla FTP. All versions o...
Read more

Tutorial: Create Cross Browser Select Box Styles Using CSS

-
Image
So many new element styles on modern web pages. CSS is a powerful language to make it. Besides buttons , there are other HTML elements that we can change its styles. In this tutorial we will create select box styles using CSS . We will create select box below. First, we need a select element inside element. But, you need write it inside element and give a class for this div element. For example, I give a class called newSelectStyle for this div element. You may write following code inside element. <div class="newSelectStyle"> <select> <option>First Option</option> <option>Second Option</option> <option>Third Option</option> <option>Fourth Option</option> </select> </div> Now, create a CSS rules for above elements. You may write following CSS rules. .newSelectStyle { display: inline-block; overflow: hidden; /* it will remove select arrow on IE because select box width exceed the ...
Read more

How To Create CSS Buttons With Gradient Color (Imageless)

-
Image
CSS button with gradient At this time I want to write a simple tutorial how to create CSS buttons as we can find on so many website on the internet. It's like Google buttons . Imageless, it's written using CSS without need any images for gradation. CSS buttons will be loaded faster than image buttons. So it will increase page speed loading of your website. We will create following buttons. In this tutorial I will create in four different colors: blue, orange, red and grey. Here we go. First you need to create CSS file, or you can also create it in your HTML file. In this tutorial, I write CSS rules in HTML file. Create a class called blueButton, write these on CSS rules: .blueButton { background-color: #4d90fe; background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed); background-image: -moz-linear-gradient(top,#4d90fe,#4787ed); background-image: -ms-linear-gradient(top,#4d90fe,#4787ed); background-image: -o-linear-gradient(top,#4d90fe,#4787ed);...
Read more