Tugas Workshop Desain Web Css Lanjutan

TUGAS WORKSHOP DESAIN WEB CSS LANJUTAN
Disusun oleh :
Nama : Mei Rosa Widyawati

NRP : 3122500036
Kelas : D3 Teknik Informatika B
Dosen pengampu : Arif Basofi, S.Kom,M.T.
DEPARTEMEN TEKNIK INFORMATIKA DAN KOMPUTER

PRODI TEKNIK INFORMATIKA
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
2022
1. Percobaan 1 :
A. Tampilan
B. Script
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border: 2px solid #01020038;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3{
background: url(download.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>

<p>Rounded corners for an element with a
specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
border:</p>
background image:</p>
</body>
</html>
2. Percobaan 2 :
A. Tampilan
B. Script
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg{
border: 10px solid transparent;
padding: 15px;
border-image: url(DDD.png) 30 stretch;
}
</style>
</head>
<body>
<h1> The border-image Property</h1>
<p>Here, the middle sections of the image are
stretched to create the border:</p>
<p id="borderimg">border-image: url(DDD.png) 30
stretch;</p>
<p>Here is the original image:</p><img src="DDD.png">
<p><strong>Note:</strong> Internet Explorer 10, and
earlier versions, do not support the border-image property.</p>
</body>
</html>
3. Percobaan 3 :
A. Tampilan
B. Script
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red;
background-image: linear-gradient(red,
yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to
Bottom</h1>
<p> This linear starts red at the
top, transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>
4. Percobaan 4 :
A. Tampilan
B. Script
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px blue;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
5. Percobaan 5 :
A. Tampilan
B. Script
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 300px;
height: 100px;
background-color: gray;
border: 1px solid black;
}
div#myDiv{
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element
clockwise or counter-clockwise.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated clockwise 20
degrees.
</div>
</body>
</html>
6. Percobaan 6 :
A. Tampilan
B. Script
<!DOCTYPE html>
<html>
<style>
.tooltip{
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext{
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip :hover .tooltiptext{
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
7. Percobaan 7 :
A. Tampilan
B. Script
<!DOCTYPE html>
<html>
<head>
<style>
.button{
background-color: #4CAF50; /*Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #f44336;} /* Red
*/
.button3 {background-color: #008CBA;} /* Blue
*/
.button4 {background-color: #e7e7e7;
color:black} /* Gray */
.button5 {background-color: #555555;} /*Black
*/
</style>
</head>
<body>
<h2>Button Colors</h2>
<p>Change the background color of a button with
the background-color property:</p>
<button class="button">Green</button>
<button class="button button2">Red</button>
<button class="button button3">Blue</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
8. Percobaan 8 :
A. Tampilan
B. Script
<!DOCTYPE html>
<html>
<head>
<style>
.pagination{
}
.pagination a{
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active{
background-color: #4CAF50;
color: beige;
border-radius: 5px;
}
.pagination a:hover:not(.active){
background-color: #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Rounded Active and Hover Buttons</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</body>
</html>
9. Percobaan 9 :
A. Tampilan
B. Script
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
}
</style>
</head>
<body>
<div class="newspaper">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse
molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui
blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi. Nam
liber tempor cum soluta
nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim
assum.
</div>
</body>
</html>
10. Percobaan 10 :
A. Tampilan
B. Script
<!DOCTYPE html>
<html>
<head>
<style>
.div1{
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">This div is smaller (width is
300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is
also 300px and height is 100px).</div>
</body>
</html>

Tugas Workshop Desain Web Css Lanjutan

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tugas Workshop Desain Web Css Lanjutan

Uploaded by

Copyright:

Available Formats

TUGAS WORKSHOP DESAIN WEB CSS LANJUTAN

Nama : Mei Rosa Widyawati

Dosen pengampu : Arif Basofi, S.Kom,M.T.

DEPARTEMEN TEKNIK INFORMATIKA DAN KOMPUTER

You might also like