HTML5 Tutorial - 21 - Text Shadows, Gradients, and Alpha

[15ceder]

who deleted the border so it would look nicer ?

[dsestuller]

wohaa this is that easy? for the same crap i was using this shit background-attachment:fixed;91­%);

background-image: -webkit-linear-gradient(right bottom, rgb(0,34,255) 15%, rgb(255,132,0) 91%);

background-image: -ms-linear-gradient(right bottom, rgb(0,34,255) 15%, rgb(255,132,0) 91%);

background-image: -webkit-gradient( linear, right bottom, left top, color-stop(0.15, rgb(0,34,255)), color-stop(0.91, rgb(255,132,0))

); and now only this? -webkit-linear-gradient(-70deg­,orange,blue); yeah

[xXxBladeStormxXx]

Do something about the high pitched mic sound please!!!!!!!!!

[barryt06]

@xXxBladeStormxXx Thanks, I noticed it as soon as I read you comment lulz

[somindradilruk]

since webkit is not support on firefox and ie, we can use the following css lines.

body { text-align:center;

}

#box{ display:block; width:500px; margin:50px auto; padding:15px; text-align:center; border:1px solid black; background:orange; border-radius:75px; box-shadow:10px 10px 40px #999;

}

#text{ font:bold 30px century gothic;

}

[vozzen]

I still don't get why you write text-align: center; in both the body and the kid; "box".

[vozzen]

You have a disturbing tinnitus noice in your videos, just saying. 

[THEGAMINGRULER]

box-shadow is now standard so now you can use box-shadow: whatever

[kiekelly]

If you find CSS3 Gradients are a pain to alter quickly, try this timesaver...

google: "CSS3 Gradient Generator"

I use "gradients.glrzad.com" - Really useful for Previewing and Tweaking...

[USDAapprove]

WAIT! HE DIDN'T USE TAHOMA

[ShadowSky24]

Oh yeah, this works for radial too, just change linear to radial.

[iAmAlascar]

@ShadowSky24 Actually, -moz- works for anything that -webkit- can do. You just need to write them both. EX: display: -webkit-box; display: -moz-box; -webkit-box-flex: 1; -moz-box-flex: 1;

[ShadowSky24]

@iAmAlascar Yeah, I know.

[ShadowSky24]

HOW TO MAKE GRADIENT FOR MOZILLA FIREFOX:

background: -moz-linear-gradient(top, black, white);

[dziub1986]

Hey i had found nice property by trying, and i would like to share: you can use more that two colors in your gradient, just pass them in after the first two.

[DrFrenchie31]

whats with the HTML5 Tutorials on your website, why are they in computer science, shouldn't they be in Computer Progamming?

[GBmagic100]

@DrFrenchie31 This is not computer programming. Computer Programming Languages are all kind of the same, what do I mean? They all use variables, if statements, loops, etc. This languages are included in html to make the website more dynamic.

[NeilWilliamsOnline]

Bucky, Awesome channel loving your work man!!!

[denno021]

The reason that you don't have to add webkit before the text shadow is because the Chrome browser now recognizes that property as if it was standard.. The exact same as if you use border-radius and box-shadow without typing -webkit before them, it will still work :) (in Chrome, and possibly Firefox, depending on how many properties that's recognizing now). Try it.

[vancruel27]

Do u learn all of this from book?

[kazu20091000]

a means alpha?

[hayk7]

Make advanced tutirials pls in future "Designed in Fireworks or Photoshop finalized in HTML/CSS" I mean full process for designing full design and UI of site in fireworks for exapmle, and converting it to HTML/CSS!

THANX VERY MUCH FOR ALL YOUR TUTORIALS!!!!

[nimmy17]

another good video i have learned lots of things from you bucky

[EminoMeneko]

I think you should have explained alpha with an image background or at least a colour backround that would make it noticeable the shadow colour is merging with the background. But as usual great tut.

[me4502rs]

11th

[JelvinJS7]

Oh my god! What the fuck is barbecue?!

[TT1TTOne]

50 cent is a orange!

[tmos222]

@TT1TTOne an*

[lawr040588]

go Bucky go !

[zerohourkevin]

Firts? lolwat

[PoundSakeFTW]

Thenewboston has broken your video list because of the amount of awesome video's he has uploaded.

[barryt06]

@PoundSakeFTW Too true

[1deividas1]

welcome back

[MrAwesomeDewde2411]

THIRD

[lassdasi]

You are cool

:)

[torstein99]

firts WOHHOOOO