Tutorial, Scalable HTML Box With Rounded Corners & Transparent Shadow
Loading...
Loading...
3,805
Loading...
Uploaded by vxcriss on Jun 11, 2009
Here's a complete tutorial on how to make a scalable HTML box with rounded corners and transparent shadow from scratch. I used Adobe Photoshop to design the box and cut out the needed images, but you can use any other software, I just find Photoshop the easiest to use. The transparency of the shadow is done through 24bit PNG images for smooth blending, you can also use GIF images but you'll get rough edges because of the single-color alpha channel. If you're having trouble figuring out the HTML, you can find it on the web development section of my personal website at vxcriss.com
3:59
How to make reflections in photoshopby TipExhibit16,832 views- 0:45
Clearing floats in CSSby unlokia6,753 views
- 9:44
Creating rounded corners using images and cssby fromthecouch5,709 views
- 8:41
Convert Photoshop to HTML - Part 1by AnimateLogo56,105 views
- 6:27
Create tables with nifty rounded corners - Speaking PowerPoint tip #5by speakingppt3,845 views
- 6:59
Photoshop Tutorial 1by backtotheshed7,255 views
- 5:37
make rounded corner squares in photoshopby trishiag9,253 views
- 4:47
How to Use Shadow Boxes - Dreamweaver Tutorialby adobenicnacs13,939 views
- 1:49
How to Create Rounded Corners in Dreamweaverby Mindbitesdotcom7,695 views
- 7:28
Joomla! Tutorial - Email configuration for RSForm! Pro componentby rsjoomla16,107 views
- 9:39
HTML - Content Over Image Slices Tutorial - Part 1by TutorialClarity8,396 views
- 8:55
10/15/09: GC361 Divs and rounded corners layoutby webdesignprof1,587 views
- 3:37
Rounded edges in Photoshopby steveles8717,985 views
- 0:40
photoshop tutorial: rounded cornersby annves917 views
- 14:08
Adding a Background Drop Shadow to a Website Using Adobe Dreamweaver, Fireworks and CSS: Part Oneby storyindustrial4,695 views
- 3:22
Basic HTML Tutorialby vidtutorial133,053 views
- 8:35
Adobe Photoshop CS3 Content Boxby AdobePhotoshopCS31012,288 views
- 9:44
Create a Website Shadow with Photoshop Slice Toolby slembke14,839 views
- 1:22
CSS Introduction: box modelby zingmedia6,953 views
- 2:03
Rounding Corners of Images using GIMP - GIMP lesson #1by aarontrank435 views
thanks nice one..
but i have a problem..
i want to create several boxes like this is my html file..but i am thinking that it might be messy and redundant because i want to create at least 8 boxes..
any ideas on how to lessen the code or create a css file for the box? thanks
star33fall33 2 years ago
To lessen the code you can try using a div and css approach instead of my pure table example. However even the div approach is pretty bulky.
An alternative would be using a client-side template parser. I have a demo of a javascript template parser on my website under the web development section, you can download a .zip archive with everything you need from there. The version that I have there is more of a beta version but it does work and the code is clean and well documented.
vxcriss 2 years ago
MAN I LOVE YOU! THANK YOU SO MUCH FOR THIS!
Can I use this technique without shadows (only fill and background color)?
Simunic95 2 years ago
Of course you don't need a shadow. Just download the source files that go with this tutorial from my website, open the .psd file (photoshop file), select the rounded box layer, right click it, select blending options, and uncheck "shadow". Then use "save for web", to export the images that form the corners and the borders and overwrite the old images that had shadow. And that's it.
vxcriss 2 years ago
The source HTML, images and .psd files are also avilable on my personal website under the web development -> tutorials section if anyone needs them.
vxcriss 2 years ago