14 replies [Last post]
mysense
mysense's picture
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2010-11-27
Posts: 8
Points: 9

hey there, i hope you guys can help me out, i searched google but did not really find what i need.

the issue here is i want to make my h1 tags look like letterpress, but becouse a picute says more then a thousand words... below there is a picture of what i created in photoshop.

letterpres
or see it here

of course i used google first, but they all just did not get close.

links i have tried.

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 50 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

wish i could help with this

wish i could help with this but Ill be deffo looking for the replies! Goodluck. Wouldnt mind seeing what ed says too about reading it.

mysense
mysense's picture
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2010-11-27
Posts: 8
Points: 9

the trick they used here

the trick they used here seems nice, but the got a lot of code, and i just can't get all the things they used for the title to work.

As they said in one of the other links i've posted they use two time the text shadow, but still, i am missing something, that finishing touch.

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 5 years 23 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Help yourself first

Post the code of what you have tried to accomplish so far and then someone might help you. I don't think anyone is just going to write all the code out for you.

P.S. You mentioned quesb.com, he actually has a demo there, just copy that Cool

mysense
mysense's picture
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2010-11-27
Posts: 8
Points: 9

Code

Well i got nothing what really big at the moment, but i will post what i have now, see below.

The HTML so far

<!DOCTYPE html>
 
<html>
 
<head>
    <title></title>
 
    <!-- include the Tools -->
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
    <script type="text/javascript" src="slider.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="stylesheet" href="960.css" type="text/css" />
 
 
   </head>
 
<body>
 
            <div><p>test</p></div>
            <div><p>test</p></div>
 
 
<div id="wrap" class="container_16">
<div class="grid_4">
<h1>FEATURED <br/> WORK</h1>
</div>
<div id="slider">
<!-- main navigator -->
 
<ul id="main_navi">
 
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
 
<!-- root element for the main scrollable -->
<div id="main">
 
 
    <!-- root element for pages -->
    <div id="pages">
 
        <!-- page #1 -->
        <div class="page">
 
            <!-- inner scrollable #1 -->
            <div class="scrollable">
 
                <!-- root element for scrollable items -->
                <div class="items">
 
                    <!-- items  hier de content van een slide plaatsen-->
                    <div class="item">
 
                        <img src="img/onderdeel/feature1.jpg" />
 
 
                    </div>
 
                </div>
 
            </div>
            <div><p>test</p></div>
            <div><p>test</p></div>
            <div><p>test</p></div>
			<h3>test</h3>
			<ul>
				<li>test test</li>
				<li>test test</li>
				<li>test test</li>
				<li>test test</li>
				<li>test test</li>
				<li>test test</li>
				<li>test test</li>
				<li>test test</li>
			</ul>
        </div>
 
        <!-- page #2 -->
        <div class="page">
 
            <div class="navi"></div>
 
            <!-- inner scrollable #2 -->
            <div class="scrollable">
 
                <!-- root element for scrollable items -->
                <div class="items">
 
                    <!-- items on the second page  hier de content van een slide plaatsen-->
                    <div class="item">
 
                        <img src="img/onderdeel/feature1.jpg" id="img1"/>
 
                    </div>
 
                </div>
 
            </div>
 
        </div>
 
        <!-- page #3 -->
        <div class="page">
 
            <div class="navi"></div>
 
            <!-- inner scrollable #3 -->
            <div class="scrollable">
 
                <!-- root element for scrollable items -->
                <div class="items">
 
                    <!-- items on the first page  hier de content van een slide plaatsen-->
                    <div class="item">
                        <img src="img/onderdeel/feature1.jpg" />
                    </div>
 
                </div>
 
            </div>
 
        </div>
 
         <!-- page # -->
        <div class="page">
 
            <div class="navi"></div>
 
            <!-- inner scrollable #4 -->
            <div class="scrollable">
 
                <!-- root element for scrollable items -->
                <div class="items">
 
                    <!-- items on the first page  hier de content van een slide plaatsen-->
                    <div class="item">
                        <img src="img/onderdeel/feature1.jpg" />
                    </div>
 
                </div>
 
            </div>
 
 
 
 
    </div>
 
 
 
 
 
 
 
 
</div><!-- einde main -->
</div><!-- einde slider -->
</div><!-- container -->
            <div><p>test</p></div>
            <div><p>test</p></div>
 
 
</body>
 
</html>

The CSS so far

	body {
 
	background: #e4eaed;
   	font-family: Monaco;
 
   	}
 
	h1 {
	text-shadow: 0px 2px 1px rgba(255,255,255,0.7), 0px -2px 1px rgba(0,0,0,0.5), 0px -1px 1px rgba(0,0,0,0.5);
 
	   	color: rgba(169,169,169,0.6);
 
			}
 
 
 
    /* main vertical scroll */
    #slider #main {
        position:relative;
        overflow:hidden;
        height: 720px;
           }
 
    /* root element for pages */
    #slider #pages {
        position:absolute;
 
    }
 
    /* single page */
    #slider .page {
       width: 720px;
       margin-bottom: 300px;
    }
 
    /* root element for horizontal scrollables */
    #slider .scrollable {
        position:relative;
        overflow:hidden;
        height: 500px;
 
    }
 
    /* root element for scrollable items */
    #slider .scrollable .items {
 
        clear:both;
    }
 
 
    /* single scrollable item */
    #slider .item img{
 
    	padding: 15px;
    	margin-left: 5px;
    	background-color: #DEE1E4;
 		background-image: -moz-linear-gradient(top, #E2E5E8, #D7D9DC); /* FF3.6 */
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #E2E5E8),color-stop(1, #D7D9DC)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#E2E5E8', EndColorStr='#D7D9DC'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#E2E5E8', EndColorStr='#D7D9DC')"; /* IE8 */
 
        -moz-border-radius: 5px; /* FF1+ */
  		-webkit-border-radius: 5px; /* Saf3-4 */
        border-radius: px; /* Opera 10.5, IE 9, Saf5, Chrome */
 
        -moz-box-shadow: 0px 3px 5px #8B8E90; /* FF3.5+ */
  		-webkit-box-shadow: 0px 3px 5px #8B8E90; /* Saf3.0+, Chrome */
        box-shadow: 0px 3px 5px #8B8E90; /* Opera 10.5, IE 9 */
 
 
    	position: absolute;
 
    }
 
 
 
    #slider .item {
        position: relative;
 
           }
 
 
    /* main navigator */
    #slider #main_navi {
 
        float:right;
        padding:0px !important;
        margin-top:300px !important;
    }
 
    #slider #main_navi li {
    	background: url('img/onderdeel/slider-knop.png');
        clear:both;
        margin: 7px;
        height:16px;
        width: 16px;
        list-style-type:none;
        cursor:pointer;
    }
 
    #slider #main_navi li:hover {
        background-image: url('img/onderdeel/slider-knop-selected.png');
    }
 
    #slider #main_navi li.active {
        background-image: url('img/onderdeel/slider-knop-selected.png');
    }
 
    #slider #main_navi img {
        float:left;
        margin-right:10px;
    }
 
    #slider #main_navi strong {
        display:block;
    }
 
    #slider #main div.navi {
        margin-left:250px;
        cursor:pointer;
    }

The JS so far

$(document).ready(function() {
 
 
 
// main vertical scroll
$("#main").scrollable({
 
    // basic settings
    vertical: true,
 
    // up/down keys will always control this scrollable
    keyboard: 'static',
 
    // assign left/right keys to the actively viewed scrollable
    onSeek: function(event, i) {
        horizontal.eq(i).data("scrollable").focus();
    }
 
// main navigator (thumbnail images)
}).navigator("#main_navi");
 
// horizontal scrollables. each one is circular and has its own navigator instance
var horizontal = $(".scrollable").scrollable({ circular: true }).navigator(".navi");
 
 
// when page loads setup keyboard focus on the first horzontal scrollable
horizontal.eq(<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />.data("scrollable").focus();
 
});

What we're looking at is my slider, but thats not my problem (did read somewhere that it was a rule to post all the code). what we need is:

HTML
<h1>FEATURED <br/> WORK</h1>

CSS

h1 {
	text-shadow: 0px 2px 1px rgba(255,255,255,0.7), 0px -2px 1px rgba(0,0,0,0.5), 0px -1px 1px rgba(0,0,0,0.5);
 
	 color: rgba(169,169,169,0.6);
 
	}

The result so far can be viewed here
For the Quesb, the picture they show i do like, and i would be pleased with. however, the demo link is rubish in my opinion.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Looks good. If you're

Looks good. If you're testing in IE text-shadow doesn't work there.

mysense
mysense's picture
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2010-11-27
Posts: 8
Points: 9

Verschwindende wrote: Looks

Verschwindende wrote:

Looks good. If you're testing in IE text-shadow doesn't work there.

Yes i know, i am working on a mac so not so much ie testing for now. But yes before release i should have a fix for that. i might just put normal text there and hope IE 9 arrives soon. But i am sure there are quite a few solutions out there.

mysense
mysense's picture
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2010-11-27
Posts: 8
Points: 9

made a mistake, dubble post

made a mistake, dubble post sorry, new tot his forum not sure how i remove it, so thats why instead i did edit it

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mysense

mysense wrote:
Verschwindende wrote:

Looks good. If you're testing in IE text-shadow doesn't work there.

Yes i know, i am working on a mac so not so much ie testing for now. But yes before release i should have a fix for that. ...

Nah, folks that still use IE can just languish in the less styled page. Serves 'em right, says me.

mysense
mysense's picture
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2010-11-27
Posts: 8
Points: 9

Verschwindende wrote: Nah,

Verschwindende wrote:

Nah, folks that still use IE can just languish in the less styled page. Serves 'em right, says me.

would be nice eh? but i am making a portfolio site so people can see my work, if i want to promote myself i should make IE fix aswell. afterall they computer "noobs" might be a client.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Generally no do not make too

Generally no do not make too much effort to cater for IE6/7 simply accept that they will not have all the bells and whistles, this is a useful means to highlighting the reason that users should upgrade if they have the opportunity, however that doesn't mean that sites fail in these largely outdated superseded browsers, you must ensure that sites function well albeit without the fancy stuff )

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mysense

mysense wrote:

would be nice eh? but i am making a portfolio site so people can see my work, if i want to promote myself i should make IE fix aswell. afterall they computer "noobs" might be a client.

You could put a message to IE users stating that while you can cater to the needs of those that still insist on using IE6 that your examples on your site use the latest and greatest technology and that they may not be experiencing the full depth of your site by using such an outdated browser. Upgrades to FF/Opera/whatever are free so why not do it now? Then give a list of links and maybe even a page expounding the benefits of each.

As Hugo implies, a graceful failure of slight elements such as text shadows or rounded corners can still be made to look correct.

ralph.m
ralph.m's picture
Offline
newbie
Last seen: 9 years 8 weeks ago
Timezone: GMT+10
Joined: 2010-11-21
Posts: 5
Points: 5

You can throw a little bit of

You can throw a little bit of JS at IE if you must have it working there. Here is an example:

http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/

mysense
mysense's picture
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2010-11-27
Posts: 8
Points: 9

Verschwindende wrote: You

Verschwindende wrote:

You could put a message to IE users stating that while you can cater to the needs of those that still insist on using IE6 that your examples on your site use the latest and greatest technology and that they may not be experiencing the full depth of your site by using such an outdated browser. Upgrades to FF/Opera/whatever are free so why not do it now? Then give a list of links and maybe even a page expounding the benefits of each.

As Hugo implies, a graceful failure of slight elements such as text shadows or rounded corners can still be made to look correct.

Hmm good idea, it's not only a good reminder tot hem to upgrade. It also let's them know i am focussing on the future. but it's a shame that IE8 wich is still the most popular browser dousn't suport CSS3.

About the JS fix, i rather do not chose this solution because for the ferry few that still use IE 6/7 the site will get pretty much extra weight. I did think about replacing CSS with pictures but it would be to slow, for al users.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mysense wrote: ... About the

mysense wrote:

... About the JS fix, i rather do not chose this solution because for the ferry few that still use IE 6/7 the site will get pretty much extra weight. I did think about replacing CSS with pictures but it would be to slow, for al users.

You could do the .js fix with a conditional comment for IE only. Then it won't load for anyone else and it's not really that much more weight, is it? (I didn't look into it yet though)