How does one implement dark/transparent text-boxes?


Tags: html,css,html5,css3

Problem :

What is the best way to implement 'the dark/transparent' text-boxes on-top of the background (example: http://trishkhoo.com/2013/04/i-knew-exactly-how-she-felt/)

Please see the heading displayed in the above link:

"I knew exactly how she felt Filed Under: Random musings by Trish Khoo — 5 Comments" it is in a darker but yet transparent box.

How can this be achieved with simple css/html?

I hope this is an appropriate place to ask this. Stackoverflow has been my go-to-source for design/development related questions thus far! Thanks.



Solution :

i guess you mean a simple DIV with a semi-transparent background color right?

you can try with this:

.box{
    width:300px;
    height:100px;
    background-color:rgba(0,0,0,0.5); /* where 0.5 means 50% opacity */
/* and for a full compatibility on older browsers like ie7-8-9 you can use the filter property  */
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
      zoom: 1;

}

FIDDLE


    CSS Howto..

    CSS and html: how to style input file in css (aline the text with the choose file button)?

    How to get css background color on tag to span entire row

    How to give different style, color to dotted border of links?

    How to avoid double border from the multiple
  • How to create Text Overlays in CSS?

    How do I change the function of a button when the window size changes?

    How to hyperlink a css box [closed]

    CSS: How to set 100% width on the first li of ul

    How to use CSS to shift my menu div to the right?

    How to set a width of the background (HTML and CSS)

    how to hide and show a div that is inside of a form using only javascript and css

    How to use 100% height with css

    How to do responsive text overflow with css?

    how to add dots (…) with the same width?

    How to smoothly animate height in CSS or Javascript on mobile devices

    How do I customize the rdoc Darkfish stylesheet?

    How can I make this a horizontal list?

    How do I put 2 columns beside each other

    How to highlight the menu item for the sort type of data on the page?

    How do I apply a max-width to an input field form-control with a trailing secondary button in Bootstrap 3?

    How to give option to add css classes/IDs to content to in CMS's WYSIWYG content builder/editor to non-technical client?

    How to change Polymer(1.0) paper-toolbar background colour?

    How to align this text in CSS?

    How to add style or put a class in a php form_submit button

    How to apply “!important” from CSS via jQuery? [duplicate]

    Javascript: How do I check a css style and then change another css style?

    Having an HTML table, how can I toggle between displaying only specific rows using HTML, CSS, and JavaScript [duplicate]

    How to make content of invisible except for the left column?

    How to prevent pointer pass through in HTML?

    Why are THs bolder than TDs and how to avoid it?