SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Split background in CSS

    Anyone knows how to split the background colour of a header? For example http://www.outlish.com/ As you see the header "This Week's Issue - Updated Every Monday" this has a different colour from the rest of the header background. I will like to know how to do this.

    Thank you

  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To me it looks like they are using a sprite with a set background for the headers. Then when there is a <span> within the <h3> element they are setting the same background image for the span but are adjusting the positioning of background to reveal the brown version of the bar. Here is the image they are using: http://www.outlish.com/templates/rt_...es/h3-main.png

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Simple. You use a span. This is true for any change of style within an element. <h2><span>This</span> week's Issue</h2>. However it's important to note that they used a fixed size bg, not very clever. if you enlarge the TEXT ONLY you will see the first word expands past it's container. If you are confident that your headline will only be one line, a good compromise might be to float the span, give it a the brown bg/ white text and the H1 the brown text orange bg.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Simple. You use a span. This is true for any change of style within an element. <h2><span>This</span> week's Issue</h2>. However it's important to note that they used a fixed size bg, not very clever. if you enlarge the TEXT ONLY you will see the first word expands past it's container. If you are confident that your headline will only be one line, a good compromise might be to float the span, give it a the brown bg/ white text and the H1 the brown text orange bg.
    Ok I understand that but what if the header is more than one line what to do then and how can i implement this if the header is being pulled from a db with css only. Note i don't need to use and image i can use just colors maybe some gradients with webkit to give the same effect

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    How do you want it to look when the header runs to two lines? Do you have a drawing of what you want as I can think of many interpretations?

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    How do you want it to look when the header runs to two lines? Do you have a drawing of what you want as I can think of many interpretations?
    I never really thought of that hmmm the only thing I can think of is to
    continue with the second colour. If you have a better idea I would be glad to hear it

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will need extra elements to do it as you can't style a first-word in css (although you can style first-letter and first-line).

    This works for two lines of text and will work with any text but won't wrap nicely to three lines.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    h1 {
    	margin:0 0 20px;
    	background: #1e5799; /* Old browsers */
    	background: -moz-linear-gradient(top, #1e5799 0%, #207cca 26%, #2989d8 50%, #2989d8 74%, #7db9e8 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(26%, #207cca), color-stop(50%, #2989d8), color-stop(74%, #2989d8), color-stop(100%, #7db9e8)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #1e5799 0%, #207cca 26%, #2989d8 50%, #2989d8 74%, #7db9e8 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #1e5799 0%, #207cca 26%, #2989d8 50%, #2989d8 74%, #7db9e8 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #1e5799 0%, #207cca 26%, #2989d8 50%, #2989d8 74%, #7db9e8 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0 ); /* IE6-9 */
    	background: linear-gradient(top, #1e5799 0%, #207cca 26%, #2989d8 50%, #2989d8 74%, #7db9e8 100%); /* W3C */
    	overflow:hidden;
    	width:100%;
    	position:relative;
    	min-width:626px;
    }
    h1 span {
    	float:left;
    	padding:0 10px 105px;
    	background:brown;
    	margin:0 5px -100px 0;
    	position:relative;
    }
    b {
    	position:relative;
    	z-index:2;
    }
    </style>
    </head>
    
    <body>
    <h1><span>First</span> <b>word is styled differently from the rest of the text and can wrap to two lines</b></h1>
    <h1><span>First-word-styling</span> <b> - The first word is styled differently</b></h1>
    
    </body>
    </html>

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is excellent however am guessing it is impossible to do if I pull the actual title from a db? I ask this because the original example shown is being done in Joomla which pulls the title from a db.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by skelleex View Post
    this is excellent however am guessing it is impossible to do if I pull the actual title from a db? I ask this because the original example shown is being done in Joomla which pulls the title from a db.
    The original example uses a span as mentioned above:

    Code:
    <h3 class="module-title" style="visibility: visible;"><span>This</span> Week's Issue - Updated Every Monday</h3>
    There is no other way to do it apart from scripting or unless every fist word was the same length.

  10. #10
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The original example uses a span as mentioned above:

    Code:
    <h3 class="module-title" style="visibility: visible;"><span>This</span> Week's Issue - Updated Every Monday</h3>
    There is no other way to do it apart from scripting or unless every fist word was the same length.
    Yeah I know that part and I know it can be implement if I entered the title but unfortunately am not am pulling the title from a db. The reason why it was asked is because the live example I showed also pulls the title from a db as it is a Joomla website. But some how they are able to create that header style every time regardless of how long the first word is. According to you Paul O'B though this has a script somewhere checking this to implement the style after its pulled from the db. I guess I would have to look for such a script if I want to implement this

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by skelleex View Post
    According to you Paul O'B though this has a script somewhere checking this to implement the style after its pulled from the db. I guess I would have to look for such a script if I want to implement this
    Yes there is some Js adding the span. Disable JS and then view the page and you will see the first word is not highlighted in the header anymore. It's probably one of the joomla js plugins but there are loads in the page so you would have to look through them all.

    I'm sure someone in the javascript forum could knock up a small script with a few lines of code to insert a span where needed.

  12. #12
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes there is some Js adding the span. Disable JS and then view the page and you will see the first word is not highlighted in the header anymore. It's probably one of the joomla js plugins but there are loads in the page so you would have to look through them all.

    I'm sure someone in the javascript forum could knock up a small script with a few lines of code to insert a span where needed.
    Thanks Paul O'B as usual you are a great help


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •