Zaloguj | Zarejestruj | FAQ
Anonymous

The shadow does not warp

+ Odpowiedz

Posty: 7 Strona 1 z 1


The shadow does not warp

przez Marsha Daryabeigi » Śr mar 18, 2015 7:36 am

I made a page with picture then choose a shadow, but on the bottom of picture there is space between shadow and picture I assume it is not suppose to be any space. How we correct that?
Avatar użytkownika

Marsha Daryabeigi

  • Posty: 29
  • Dołączył(a): Pn gru 08, 2014 5:40 pm

Re: The shadow does not warp

przez nanoverso » Śr mar 18, 2015 7:59 pm

Is it online so we can take a look ?
Avatar użytkownika

nanoverso

  • Posty: 253
  • Dołączył(a): So maja 10, 2014 12:08 am
  • Lokalizacja: Brazil
--
Free VST Plugins Download.

Re: The shadow does not warp

przez Marsha Daryabeigi » Cz mar 19, 2015 4:25 pm

nanoverso napisał(a):Is it online so we can take a look ?

It is not complete but here is draft

<!DOCTYPE html>
<html>
<head>
<title>Impressionst Exam</title>
<link rel="stylesheet" type="text/css" href="" />
</head>
<body>
<h1>Impressionist Artists </h1>
<h2>and their paintings</h2>
//*Make a navigation list*//
<nav>
<ul>
<li><a class="link" href="#">Pierre-Auguste Renoir</a></li>
<li><a class="link" href="#">Claude Monet</a></li>
<li><a class="link" href="#">Edgar Degas</a></li>
<li><a class="link" href="#">Édouard Manet</a></li>
<li><a class="link" href="#">Paul Cézanne</a></li>
</ul>
</nav>

// / Placing pictures of artist and thier paintings / //
<a class="link" href="#"<p>Pierre-Auguste Renoir</p></a>
<div id="picture1">
<img src="http://ts1.mm.bing.net/th?&id=HN.608039074638922111&w=300&h=300&c=0&pid=1.9&rs=0&p=0" />
</div>

<div id="picture2">
<img src="http://www.bing.com/th?id=AxruTB2wEZAqTYQ300C300&w=120&h=120&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&pid=16.2" />
</div>

<div id="column1">
<p>Pierre-Auguste Renoir was a French artist who was a leading painter in the development of the Impressionist style.
As a celebrator of beauty, and especially feminine sensuality,
it has been said that "Renoir is the final representative of a tradition which runs directly from Rubens to Watteau."</p>
</div>

<div id="picture3">
<a class="link" href="#"<p>Claude Monet</p></a>
<img src="http://www.bing.com/th?id=AbRHPRcKVQxXE7w300C300&w=120&h=120&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&pid=16.2" />
</div>

<div id="picture4">
<img src="http://ts3.mm.bing.net/th?id=HN.608023432366523360&w=184&h=164&c=7&rs=1&qlt=90&o=4&pid=1.7" />
</div>

<br style="clear:both">
/* cleaning the float *?

<div id="column2">
<p>Oscar-Claude Monet was a founder of French Impressionist painting,
and the most consistent and prolific practitioner of the movement's philosophy
of expressing one's perceptions before nature, especially as applied to plein-air
landscape painting. The term "Impressionism" is derived from the title of his painting Impression, soleil levant,
which was exhibited in 1874 in the first of the independent exhibitions mounted by
Monet and his associates as an alternative to the Salon de Paris.</p>
</div>


<div id="picture5">
<a class="link" href="#"<p>Edgar Degas</p></a>
<img src="http://www.bing.com/th?id=ATD%252fqFsISSaV1BA300C300&w=120&h=120&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&pid=16.2" />

</div>

<div id="picture6">
<img src="http://ts1.mm.bing.net/th?&id=HN.608048914414636122&w=300&h=300&c=0&pid=1.9&rs=0&p=0&r=0" />
</div>

<div id="column3">
<p>Edgar Degas was a French artist famous for his paintings, sculptures, prints,
and drawings. He is especially identified with the subject of dance; more than half
of his works depict dancers. He is regarded as one of the founders of Impressionism,
although he rejected the term, preferring to be called a realist. He was a superb draftsman,
and particularly masterly in depicting movement, as can be seen in his renditions of dancers,
racecourse subjects and female nudes. His portraits are notable for their psychological
complexity and for their portrayal of human isolation.</p>
</div>


<div id="picture7">
<a class="link" href="#"<p>Édouard Manet</p></a>
<img src="http://www.bing.com/th?id=A47a6e2c9fd61ab414aadc0ef369ea0ec&w=120&h=120&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&pid=16.2" />
</div>
<div id="picture8">
<img src="http://ts1.mm.bing.net/th?&id=HN.607986469886822078&w=300&h=300&c=0&pid=1.9&rs=0&p=0&r=0" />
</div>
<div id="column4">
<p>Édouard Manet was a French painter. He was one of the first 19th-century artists
to paint modern life, and a pivotal figure in the transition from Realism to Impressionism.</p>
</div>
<div id="picture9">
<a class="link" href="#"<p>Paul Cézanne</p></a>
<img src="http://www.bing.com/th?id=Ac10fae5deb717da9c185e6ab838fab04&w=120&h=120&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&pid=16.2" />
</div>
<div id="picture10">
<img src="http://ts1.mm.bing.net/th?&id=HN.607993741266257367&w=300&h=300&c=0&pid=1.9&rs=0&p=0&r=0" />
</div>

<div id="column5">
<p>Paul Cézanne was a French artist and Post-Impressionist painter whose work laid the
foundations of the transition from the 19th-century conception of artistic endeavour to a new
and radically different world of art in the 20th century. Cézanne's often repetitive,
exploratory brushstrokes are highly characteristic and clearly recognizable.
He used planes of colour and small brushstrokes that build up to form complex fields.
The paintings convey Cézanne's intense study of his subjects.</P>
<style type="text/css" />
h1{color: blue; font-family: "arial"; background: yellow; padding: 20px 20px 20px 80px;
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;}
h2{background: orange; padding-left:120px;
border-width: 20px
border-style: outset;
border-color: red;}

#picture1 {
position:absolute;right: 250px;
box-shadow: 10px 10px gold; }


#picture2 {

width: 150px;
height: 90px;
margin: 5px;
}
#column1{
position: absolute; left: 250px;
bottom: 220px;
width: 40%;
}
#picture3 {
float: left;
position: absolute;
top: 675px;
height: 90px;
margin: 5px;
}


#picture4 {

position: absolute; right:290px;
bottom: -150px;
box-shadow:10px 10px lightgreen;
}
#column2{
position: absolute; left: 250px;
bottom: -230px;
width: 40%;
}
#picture5 {
position: absolute;
bottom: -440px;
}


#picture6 {
position: absolute; right: 200px;
bottom: -550px;
box-shadow:10px 10px green;}



#column3{
position: absolute; left: 250px;
bottom: -550px;
width: 40%;
}


#picture7 {
position: absolute;
bottom: -780px;
width: 500px;
-webkit-box-shadow:10px 10px FFCC00;}



#picture8 { float: right;
position: absolute; right: 250px;
bottom: -950px;}

#column4 {position: absolute; left: 250px;
bottom: -750px;
width: 40%;}

#picture9 {float: left;
position: absolute;
bottom: -1170px;
width: 500px;}

#picture10 { float: right;
position: absolute; right: 200px;
bottom: -1250px;
box-shadow:10px 10px CC9900;}

#column5 {position: absolute; left: 250px;
bottom: -1250px;
width: 40%;}

p {color: darkblue; font-family: "Times new roman";
font-size: 22px;
text-align: left;
}

ul {
body {background: white;}

h1 {color: #000000;
background-color: #FF9900;
font: normal normal bold 2em Damion, courier new, serif;
text-decoration: underline;}

p {font: normal normal normal 14px courier new, serif;
text-indent: 30px;
text-align:justify;
text-transform: none;
letter-spacing:1px;}
}
//*the link to the name of artist*//
a:link {color: #6699CC;
text-decoration:none;}
a:visited {color: #660099;
text-decoration:none;}
a:hover {text-transform: uppercase;
font-weight: bold;
color:blue;
background-color: yellow;
text-decoration:none;}
a:active {background-color: aqua;
text-decoration:none;}
</style>
</body>
</html>
Avatar użytkownika

Marsha Daryabeigi

  • Posty: 29
  • Dołączył(a): Pn gru 08, 2014 5:40 pm

Re: The shadow does not warp

przez nanoverso » Pt mar 20, 2015 1:29 am

Try specifying the box-shadow for the img element instead of it´s container div, looks like some of your div´s have a margin specified.
Avatar użytkownika

nanoverso

  • Posty: 253
  • Dołączył(a): So maja 10, 2014 12:08 am
  • Lokalizacja: Brazil
--
Free VST Plugins Download.

Re: The shadow does not warp

przez Marsha Daryabeigi » N mar 22, 2015 10:59 pm

Here what is going on

Załączniki

  1. borwrp.jpg (71.67 KiB) Pobrane 1828 razy

Avatar użytkownika

Marsha Daryabeigi

  • Posty: 29
  • Dołączył(a): Pn gru 08, 2014 5:40 pm

Re: The shadow does not warp

przez XainPro » So mar 28, 2015 7:50 am

it's ok because shadow is always on one side shadow dose not wrap if you want to wrap it use border property :)
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: The shadow does not warp

przez Marsha Daryabeigi » Śr kwi 15, 2015 4:14 pm

Thank you but I saw the example of shadow that wrap boxes completely to side and bottom.
Avatar użytkownika

Marsha Daryabeigi

  • Posty: 29
  • Dołączył(a): Pn gru 08, 2014 5:40 pm


+ Odpowiedz

Strona 1 z 1