Posts

Showing posts with the label CSS

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

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