css week 6
Quiz yourself by thinking what should be in
each of the black spaces below before clicking
on it to display the answer.
Help!
|
|
||||
|---|---|---|---|---|---|
| border-radius: 25px; | Create a rounded border for a box
🗑
|
||||
| border-image: url(img.jpg) 5% round; | Create an image border
🗑
|
||||
| background: linear-gradient(red,green,blue); | Create a linear gradient color
🗑
|
||||
| background: linear-gradient(to right,red,green,blue); | Create a linear gradient color with direction left to right
🗑
|
||||
| background: linear-gradient(to left,red,green,blue); | Create a linear gradient color with direction right to left
🗑
|
||||
| background: linear-gradient(to top,red,green,blue); | Create a linear gradient color with direction bottom to top
🗑
|
||||
| background: linear-gradient(to bottom,red,green,blue); | Create a linear gradient color with direction top to bottom
🗑
|
||||
| background: radial-gradient(red,green,blue); | Create a radial gradient color
🗑
|
||||
| h3 { text-shadow: 2px 2px hotpink; } | Insert a text shadow in heading 3
🗑
|
||||
| OverflowEllipsis:hover{overflow:visible; width:100%; } | Hover over the element to display the hidden text
🗑
|
||||
| p{word-wrap: break-word;} | Change the line if the paragraph is at the end of the outline box
🗑
|
||||
| Transform: translate(200px,200px); | You can move an element using this method
🗑
|
||||
| Transform: rotate(45deg); | Rotate a shape
🗑
|
||||
| Transform: scale(2 , 2 ); | Change the size of an element
🗑
|
||||
| Transform: rotateX(500deg); | Rotate X a shape
🗑
|
||||
| Transform: rotateY(500deg); | Rotate Y a shape
🗑
|
||||
| Transform: rotateZ(500deg); | Rotate Z a shape
🗑
|
||||
| .brightness_filter {filter: brightness(150%);} | Apply a brightness filter
🗑
|
||||
| .grayscale { filter: grayscale(150%); } | Apply a grayscale filter
🗑
|
||||
| .opacity {filter: opacity(40%);} | Apply an opacity filter
🗑
|
||||
| img :hover { transform: scaleX(-1); } | Flip an image horizontally
🗑
|
||||
| Cursor: not-allowed; | Disabled button
🗑
|
||||
| Display: block; | Vertical Group Button
🗑
|
||||
| Column-count: 4; | Separate the content in four columns
🗑
|
||||
| Column-rule: 2px solid grey; | insert a line between the columns
🗑
|
||||
| Resize: horizontal; | Resize horizontal the text area
🗑
|
||||
| Resize: vertical; | Resize vertical the text area
🗑
|
||||
| Resize:both; | Resize vertical and horizontal the text area
🗑
|
Review the information in the table. When you are ready to quiz yourself you can hide individual columns or the entire table. Then you can click on the empty cells to reveal the answer. Try to recall what will be displayed before clicking the empty cell.
To hide a column, click on the column name.
To hide the entire table, click on the "Hide All" button.
You may also shuffle the rows of the table by clicking on the "Shuffle" button.
Or sort by any of the columns using the down arrow next to any column heading.
If you know all the data on any row, you can temporarily remove it by tapping the trash can to the right of the row.
To hide a column, click on the column name.
To hide the entire table, click on the "Hide All" button.
You may also shuffle the rows of the table by clicking on the "Shuffle" button.
Or sort by any of the columns using the down arrow next to any column heading.
If you know all the data on any row, you can temporarily remove it by tapping the trash can to the right of the row.
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
Created by:
kcoulee
Popular Computers sets