Comments on: How to Create Inset Typography with CSS3 http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/ Tue, 18 Jun 2013 18:31:11 +0000 hourly 1 http://wordpress.org/?v=3.0.4 By: diek http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/#comment-133689 diek Sun, 30 Oct 2011 20:08:58 +0000 http://sixrevisions.com/?p=2828#comment-133689 So if you have the patience for a newbie I have a question. How does you blend this, or the similar photoshop image, into the page? It is an cool look but right now it not cool with my limited ability. Thank you, d So if you have the patience for a newbie I have a question. How does you blend this, or the similar photoshop image, into the page? It is an cool look but right now it not cool with my limited ability. Thank you,
d

]]> By: JesseD http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/#comment-106410 JesseD Wed, 15 Jun 2011 22:15:52 +0000 http://sixrevisions.com/?p=2828#comment-106410 Since the gradient is going from light to dark to achieve more of an inset look the high-lights and low-lights should be reversed. I dropped down the alpha and reversed the direction: text-shadow: rgba(0,0,0,0.3) 1px 0, rgba(0,0,0,0.2) 0 1px, rgba(255,255,255,0.3) 0 -1px, rgba(0,0,0,0.2) -1px 1px; Since the gradient is going from light to dark to achieve more of an inset look the high-lights and low-lights should be reversed.
I dropped down the alpha and reversed the direction:

text-shadow: rgba(0,0,0,0.3) 1px 0, rgba(0,0,0,0.2) 0 1px, rgba(255,255,255,0.3) 0 -1px, rgba(0,0,0,0.2) -1px 1px;

]]> By: Prakash http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/#comment-104488 Prakash Wed, 08 Jun 2011 04:27:06 +0000 http://sixrevisions.com/?p=2828#comment-104488 nice tutorial. working for me in IE9, chrome and in firefox. gr8 work :) nice tutorial. working for me in IE9, chrome and in firefox.
gr8 work :)

]]> By: Praveen http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/#comment-100818 Praveen Thu, 12 May 2011 05:33:23 +0000 http://sixrevisions.com/?p=2828#comment-100818 @rasmusfl0e and @Andrew Roberts. I tried and agree to u both. Nice tut Andrew. I will use this in my next design. Thank you. Keep up the good work..:-) @rasmusfl0e and @Andrew Roberts. I tried and agree to u both.
Nice tut Andrew. I will use this in my next design. Thank you.
Keep up the good work..:-)

]]> By: Josh http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/#comment-99056 Josh Wed, 27 Apr 2011 19:14:58 +0000 http://sixrevisions.com/?p=2828#comment-99056 The only problem is that the background gradient should be switched so it actually looks like the light source is coming from the top. If the light source is coming from the top, the top inside of the inset type would be in shadow hence the black shadow. The bottom edge of the inset type would be in the light hence the white shadow on the bottom. The shadows here are set up fine. Like I said the background gradient just needs switched. I've also found that: text-shadow: 0 1px 2px #a8c9e7, 0 -1px 2px #000000; with the first color being a lighter version of the lighter gradient color but not quite white, makes a more convincing inset appearance. That's just my experience though. The only problem is that the background gradient should be switched so it actually looks like the light source is coming from the top. If the light source is coming from the top, the top inside of the inset type would be in shadow hence the black shadow. The bottom edge of the inset type would be in the light hence the white shadow on the bottom. The shadows here are set up fine. Like I said the background gradient just needs switched.

I’ve also found that:

text-shadow: 0 1px 2px #a8c9e7, 0 -1px 2px #000000;

with the first color being a lighter version of the lighter gradient color but not quite white, makes a more convincing inset appearance. That’s just my experience though.

]]> By: Alessandro Pucci http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/#comment-96969 Alessandro Pucci Fri, 08 Apr 2011 10:53:08 +0000 http://sixrevisions.com/?p=2828#comment-96969 Nice tuts! A question for you... can i make an emboss effect on gradient? Thanks Nice tuts! A question for you… can i make an emboss effect on gradient?

Thanks

]]> By: Ifeanyi http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/#comment-91362 Ifeanyi Tue, 15 Feb 2011 15:05:59 +0000 http://sixrevisions.com/?p=2828#comment-91362 Thanks for sharing this tut... Great guy. Thanks for sharing this tut… Great guy.

]]> By: Ifeanyi http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/#comment-91361 Ifeanyi Tue, 15 Feb 2011 15:04:39 +0000 http://sixrevisions.com/?p=2828#comment-91361 This is cool and awesome... Thanks for sharing This is cool and awesome… Thanks for sharing

]]> By: Jen http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/#comment-81980 Jen Mon, 15 Nov 2010 14:17:42 +0000 http://sixrevisions.com/?p=2828#comment-81980 Great, just what I needed. Thanks Andrew, and @CiNiTriQs, yep this and other css3 codes are really great ways for enhancing typography =) Great, just what I needed. Thanks Andrew, and @CiNiTriQs, yep this and other css3 codes are really great ways for enhancing typography =)

]]> By: CiNiTriQs http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/#comment-79358 CiNiTriQs Sat, 23 Oct 2010 20:47:02 +0000 http://sixrevisions.com/?p=2828#comment-79358 Even though this cannot be done cross-oldbrowser wise yet, a great thing to already learn and implement for those webjunkies with the latest browsers at all times while we wait for the rest to come along... yet another nice tool in the css arsenal. Even though this cannot be done cross-oldbrowser wise yet, a great thing to already learn and implement for those webjunkies with the latest browsers at all times while we wait for the rest to come along… yet another nice tool in the css arsenal.

]]>