From the course: Productivity Tips for Web Designers
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Creating stitched borders with CSS
From the course: Productivity Tips for Web Designers
Creating stitched borders with CSS
- Hello everyone, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson I'll show you a simple, effective technique to create a stitched border effect with CSS. Adding a stitched border effect to an object gives it a hip, 3D, tactile appearance that many people find attractive. You can use this style on any element like buttons, banners, and icons, but be careful not to overdo it. As with any style less is often more so use this technique selectively to add emphasis to a particular area of your site. Let's start a basic stitched border. You'll begin by creating a div container on your page with a class attribute called stitched. It's okay to give an element a style before you've created the CSS. Then duplicate your container twice more so you have a set of three stacked divs. Now create a style called stitched with the following attributes including padding, margin, color, font, border, background-color, and shadow styles. In this example I've made the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
- 01_01_MakingBlogHeadlinesPop.zip
- 01_02_block_quotes.zip
- 01_04_pairingfonts.zip
- 01_05_linkstyles.zip
- 01_06_Readability.zip
- 02_01_Rulers_Grid_Guides.zip
- 02_02_Shadow_Effects.zip
- 02_03_Type_Shapes.zip
- 02_04_AIWebSetup_Layout_Outlines.zip
- 02_05_AI_Symbols.zip
- 02_06_AI_TextFormattingForTheWeb.zip
- 02_07_AI_GraphicStyles.zip
- 02_08_AI_WorkingWithTextures.zip
- 02_09_AI_TheArtofRoundingCorners.zip
- 02_10_AI_UsingTextWrapAsPadding.zip
- 03_01_Grabbing_Measurements.zip
- 03_02_SmartFilters.zip
- 03_03_Content_Aware_Scale.zip
- 03_05_SamplingColors.zip
- 03_06_Resize.zip
- 03_07_ColorTinting.zip
- 03_08_QuickTeethWhitening.zip
- 03_09_Levels.zip
- 03_10_Optimize.zip
- 04_01_GoogleFonts.zip
- 04_02_bootstrap.zip
- 04_03_master_css.zip
- 04_04_CSSShadows.zip
- 04_05_repeat.zip
- 04_06_TwoMinRotate.zip
- 04_07_stitchedborder.zip
- 04_08_dropcaps.zip
- 04_10_CSSRoundingImages.zip
- 04_09_entities.zip
- 04_11_textselectioncolor.zip
- 04_12_tintedimagerollovers.zip
- 05_02_Externalize_CSS_JS.zip
- 05_04_CodeCleanup.zip
- 05_05_about_fix.zip
- 05_06_validation.zip
- 05_07_CheckingLinks.zip
- 05_08_5_8_Using_Snippets.zip
- 05_09_5_9_EasyPopups.zip
- 05_10_5_10_HideShow.zip
- 05_11_about.zip
- 05_12_SEOchallenge.zip
Contents
-
-
-
-
-
-
Using Google font effects4m 39s
-
Commenting code for better clarity6m 19s
-
Utilizing master CSS files to speed up design4m 33s
-
Adding pizzazz with CSS shadow effects4m 45s
-
Incorporating multiple background images4m 54s
-
A two-minute trick for rotating objects4m 17s
-
Creating stitched borders with CSS3m 50s
-
Dropping in CSS drop caps6m 26s
-
Coding special characters dependably with entities3m 29s
-
Rounding square images using CSS3m 14s
-
Customizing your text-selection color with CSS4m 12s
-
Tinting images with CSS for cool hover effects6m 1s
-
-