CSS med skugga

Peter_Holm · 2004-03-08, 23:46

CSS-text med skugga, enkelt?

Helst i dreamweaver utan allt för mycket kod-knackade...

Har kollat in:

http://andreas.web-graphics.com/css-shadow/

Men blir inte klok på en sak, måste man för varje textsnutt ha:

#example:after {
content: 'Web-Graphics';

?

Jag vill kunna skriva text med skugga inom div-taggen bara... inte ange i css-filen varje textsnutt jag vill skriva..

Undrar om jag är ute å cyklar... fast det är vinter

linus1 · 2004-03-14, 06:04

hm.. om du vill kunna kunna skriva en

Kod:

<div>

-tag med en speciell stil/style så är det bara att skriva en "allmän" ccs kod för alla div tager ex:

div {
border:1px solid black;
}

fattar du?

eller kanske var det inte det du var ute efter :P

Holm · 2004-04-24, 23:02

Svar på din fråga: Eftersom hans kod är gjord så man deklarerar två segment innehållande varsin text så, ja. Du måste deklarera i htmlen eller i css för varje text. Det är så jag utläser det
Det är väldigt enkelt. Det är så att det är CSS2, man använder CSS lager istället för tables.

Kod:

#shadow {
    font-family: Verdana; ## Det typsnittet du vill ha .
	font-size: 1.6em;     ## Storlek på det.
	font-weight: bold;
	color: #c60;        ## Färgen.

Okej där är koden för den "stilen" som skall finnas i diven "shadow".
Men den koden är inte komplett för att skapa skugga. Förklarar efter html episoden.

html koden skall se ut så här:

Kod:

<html>
....
... ## det vanliga som ligger här (head etc etc)
..
<body>
<div id="shadow"> ## Här börjar det intressanta, om du inte känner till hur CSS2 och uppåt funkar, läs på W3C eller google.
Texten med skugga
</div>

Okej, den CSS koden kommer bara ge dig Verdana 1.6em stor, inget kul eller hur?

Därför kommer detta in i bilden:

Kod:

div[id=shadow] {
	color: #000 !important;
	}
#shadow:after {
	content: 'Web-Graphics'; ## Vilket innehåll som det skall innehålla (lägg din egna text).
	color: #c60;           ## Färg.
	display: block;         ## Bry dig inte.
	text-indent: -0.1ex;    ## Här skapas skugg effekten genom förskjutning
	margin-top: -1.3em;    ## Här skapas en skugga genom att flytta ner texten lite, bra va? 
	}

All CSS kod + XHTML exempel som visar "hur det skall se ut"

CSS (filens namn 'style.css', skall ligga i samma mapp som 'index.ZYX')

Kod:


#content {
	position: absolute;
	height: 700px;
	width: 500px;
	padding: 15px;
	border: 1px dashed #333;
	background-color: #eee;
	}

#shadow {
    font-family: Verdana; 
	font-size: 1.6em;     
	font-weight: bold;
	color: #c60;        

 div[id=shadow] {
	color: #000 !important;
	}

#shadow:after {
	content: 'Text'; 
	color: #c60;           
	display: block;         
	text-indent: -0.1ex;    
	margin-top: -1.3em;    
	}

HTML

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
 <title> Exempel </title>
 </head>
<style type="text/css" media="all">
@import "style.css";
</style>
<body>
 <div id="content">
 <div id="shadow">
  Text 
 </div>
 </div>
</html>

OBS! Kan förekomma någon felaktighet i koden - rakt av utan testning, men jag tror det skall funka

Bara Kåpy and Päjst, sedan leka med det.

Lycka Till!

MvH Holm
42. Productions

PS. Tror jag missuppfatta frågan, men lämnar inlägget. Någon kanske vill ha en genomgång hur man använder effekten. DS

Peter_Holm · 2004-04-24, 23:43

Tack så mycket, till och med jag verkar fatta detta. Och jag tror inte du missuppfattade mig! Trevligt uttömmande svar!

Peter (Holm)

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

CSS med skugga