Web Design Transparent Backgrounds. Why : Allow text to appear clearly above a graphic background image that still can be seen in the background. Without.

Slides:

Advertisements

Similar presentations

Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.

Advertisements

Very quick intro HTML and CSS. Sample html A Web Title.

Session 4: CSS Positioning Fall 2006 LIS Web Team.

INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.

Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.

With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ Example h1.

Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.

Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:

4.01 Cascading Style Sheets

1 CS428 Web Engineering Lecture 10 Images, Tables, Forms, Border-Radius (CSS – V)

CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.

Slide 1 of 83 Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td.

Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.

Basics of Smarajit Dasgupta.

CSS – Presentation of Information. Types of Style Sheets External Embedded h1{color:red; font-family: Arial;} Inline Text is here.

Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.

CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.

Today’s objectives  Assignment 1  Padding, Margins, Borders  Fluid Layout page  Building accessible Table  Element size with padding and border 

 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.

COMP213 – Web Interface Design

Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.

Chcslonline.org Text –wrapping around Images. chcslonline.org To wrap text around an image, lets set up a style in our style sheet. open a new notepad.

Part 4 Introduction to CSS. CSS Table Table Borders table, td, th { border:1px solid black; } Firstname Lastname Bader Ali Paul Manuel The example below.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Web Foundations THURSDAY, OCTOBER 3, 2013 LECTURE 6: CSS CONTINUED.

CSS with XHTML Please use speaker notes for additional information!

Quick Questions 1. What does HTML stand for? 2. What are the three main languages of the Web? 3. What is the purpose of the tags? 4. Why do we indent different.

1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)

WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB.

CSS Fun damentals The Document Hierarchy Element Relationships The Box Model.

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  CSS properties for margin  CSS properties for dimensions (width,

11/12/2015 Box Model Reed Crouch. 11/12/2015  HTML elements can be considered as boxes. In CSS, the term "box model" is used when referring to layout.

Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.

CSS – Cascading Style Sheets

Lecture 2: Cascading Style Sheets (CSS) Instructor: Dr. M. Anwar Hossain.

Coding with HTML/CSS Quiz { } Play as a PowerPoint slideshow for answers.

Introduction to MIS1 Copyright © by Jerry Post Introduction to MIS Appendix 3 Creating Web Pages.

5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations SlideSet #5: Advanced CSS.

Coding with HTML {. THE BASICS { What is HTML and how can you use it to make websites?

OV Copyright © 2008 Element K Content LLC. All rights reserved. Working with Web Pages  An Introduction to Cascading Style Sheets  Format a Web.

HTML and Dreamweaver November 11th. Agenda Box Model Displaying and positioning elements – Padding – Margin – Float – Display – Position HTML Demo.

Cascading Style Sheet (CSS) SAMPLE IT133 Pengembangan Web.

Nesting and Floating. Nesting and Floating Elements To make our page content appear the way we want, and to make the best use of screen space, we can.

Chapter 7.  Change body and link styles  Create a drop-down menu  Change color and font styles in the menu  Create a pop-up effect using CSS  Utilize.

Cascading Styles Sheets Positioning HTML elements.

HTML & CSS Contents: the different ways we can use to apply CSS to The HTML documents CSS Colors and Background CSS Fonts CSS Text CSS box model: padding,

CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.

4.01 Cascading Style Sheets

Nesting and Floating.

Google fonts CSS box model

CSS Layouts: Grouping Elements

Nesting and Floating.

CS1220 Web Programming Saloni Chacha.

Advanced CSS & CSS3.

Cascading Style Sheets (Layout)

Web Authoring Task 1– Create Style Sheet List – LI { Table Body

Chapter 6 More CSS Basics Key Concepts

Style Sheet Create a new CSS called Cameras.CSS TD Web Authoring

Table CSS Create a new CSS called tablestyle.CSS Green Background

MORE Cascading Style Sheets (The Positioning Model)

Float Property Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using.

CSS and Class Tools.

Nesting and Floating.

4.01 Cascading Style Sheets

Presentation transcript:

Web Design Transparent Backgrounds

Why : Allow text to appear clearly above a graphic background image that still can be seen in the background. Without TransparencyWith Transparency

How the technique works I.Insert a container div that has your picture as a background image. II.Insert a nested div smaller than the container. (Trans Div) III.Style the Trans div to be partially transparent. IV.Type your text using a color that provides high contrast with the image below.

The HTML Body Code Here enter your content: paragraphs, lists, tables etc /* End transparent div */ /* End container div */

The Embedded Style Code for the Trans Div …. div.transbox /* { width: 500px; height: 418px; background-color: #c3a342; /* color of the transparent box (div) */ border: 1px solid black; /* for IE */filter: alpha(opacity=80); /* CSS3 standard */; opacity: 0.80; margin-top: 100px; margin-left: 250px; } div.transbox p { margin:0px 40px; font-weight:bold; color:#000000; /* text will be black */ }

An Example on the web