Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Monday, February 25, 2013

Cross-Platform Use of CSS Pseudo Elements

I recently worked on a website that needed bubble quotes in HTML.  I found an exhastive write-up about this in Nicolas Galapher's great site on CSS tricks. With a little help from Nicolas and the CSS pseudo elements, I was able to get bubble quotes working perfectly.

Check out the bubble below - no graphics were used and it is cross-platform compatible.

This version comes out of Opera for Windows.  However, it works well in Safari, Firefox and IE 9.  The one exception is that the bubble in ie does not have the graduated fill.  It is just straight blue in color.

Here is the code (thanks again to Nic) that worked for me:

HTML
         <blockquote class="bubble-left">  
                       <p>"Knowledge is knowing a tomato is a fruit; Wisdom is not putting it in a fruit salad."</p>  
         </blockquote>  
         <p>Brian Gerald O’Driscoll</p>  

CSS
 .bubble-right  
 {  
      position: relative;  
      padding: 15px 30px;  
      margin: 20px 20px 20px 20px;  
      color:#fff;   
      background:#075698;  
      /* css3 */  
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));  
      background:-moz-linear-gradient(#2e88c4, #075698);  
      background:-o-linear-gradient(#2e88c4, #075698);  
      background:linear-gradient(#2e88c4, #075698);  
      -webkit-border-top-left-radius: 25px 50px;  
      -webkit-border-top-right-radius: 25px 50px;  
      -webkit-border-bottom-right-radius: 25px 50px;  
      -webkit-border-bottom-left-radius: 25px 50px;  
      -moz-border-radius: 25px / 50px;  
      border-radius: 25px / 50px;  
 }  
 .bubble-right p  
 {  
   color: White;  
 }  
 .bubble-right + p {margin:10px 180px 2em 0; text-align:right; font-style:italic;}  
 /* creates the larger triangle */  
 .bubble-right:before {  
      content:"";  
      position:absolute;  
      bottom:-30px;  
      right:80px;  
      border-width:0 0 30px 50px;  
      border-style:solid;  
      border-color:transparent #075698;  
   /* reduce the damage in FF3.0 */  
   display:block;   
   width:0;  
 }  
 /* creates the smaller triangle */  
 .bubble-right:after {  
      content:"";  
      position:absolute;  
      bottom:-30px;  
      right:110px;   
      border-width:0 0 30px 20px;  
      border-style:solid;  
      border-color:transparent #fff;  
   /* reduce the damage in FF3.0 */  
   display:block;   
   width:0;  
 }  

I have to give Nicolas Galapher a lot of credit for his investigation and write up into how to use CSS pseudo elements.  I also have to give the W3C Committee credit for their fore site on coming up with this capability.

Here is a quick list of the Pseudo Elements defined by W3C.

SelectorExampleExample description
:linka:linkSelects all unvisited links
:visiteda:visitedSelects all visited links
:activea:activeSelects the active link
:hovera:hoverSelects links on mouse over
:focusinput:focusSelects the input element which has focus
:first-letterp:first-letterSelects the first letter of every <p> element
:first-linep:first-lineSelects the first line of every <p> element
:first-childp:first-childSelects every <p> elements that is the first child of its parent
:beforep:beforeInsert content before every <p> element
:afterp:afterInsert content after every <p> element
:lang(language)p:lang(it)Selects every <p> element with a lang attribute value starting with "it"