04. Collaborative CSS / HTML Still Life
Introduction
For this class we will start applying our HTML / CSS skills in a collaborative setting. You will split into groups (determined by the cards) and then you will reproduce a still life from your particular (chosen) vantage point.
Some Helpful Snippets
The following CSS might be helpful for you in the process of this exercise. They are largely to do with producing shapes, as well as other effects we have not talked about yet.
How to Make a Circle
.circle
{
width : 100px;
height : 100px;
background : #FF00FF;
border-radius: 50%;
}
How to Make an Oval
.oval
{
width : 200px;
height : 100px;
background : #FF00FF;
border-radius: 100px / 50px;
}
How to Make a Heart
This is via Nicolas Gallagher (note that this uses the pseudo-elements "before" and "after" to add content to create the heart image)
#heart
{
position: relative;
width : 100px;
height : 90px;
}
#heart:before,
#heart:after
{
position : absolute;
content : "";
left : 50px;
top : 0;
width : 50px;
height : 80px;
background : #FF00FF;
border-radius : 50px 50px 0 0;
transform : rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after
{
left : 0;
transform : rotate(45deg);
transform-origin: 100% 100%;
}
Making a Triangle in CSS
This makes creative use of a transparent border to visually create a triangle.
#triangle-up
{
width : 0;
height : 0;
border-left : 50px solid transparent;
border-right : 50px solid transparent;
border-bottom: 100px solid #FF00FF;
}
Rotation in CSS
You can apply rotation as a property, you just need to make sure you give it the units of "deg" for degrees.
.square
{
width : 100px;
height : 100px;
background-color: #0000FF; /* blue */
}
/* these both do the same thing */
.square_rotate
{
rotate : 45deg;
}
.square_rotate_transform
{
transform: rotate(45deg);
}
You can also specify the origin point, or what point the rotation is "around." In Adobe After Effects, you might be familiar with the Anchor Point in the Transform panel. This is by default around the center of the element being targeted.
.square_rotated
{
rotate : 45deg;
/*
use the lower right hand corner
this might be useful for flower
petals, for example
*/
transform-origin: 100% 100%;
}
Opacity
You can set the opacity of a given element in the following ways. Note that background and background-color do the same thing.
/*
each of the classes
below do the same thing.
Make a magenta thing
that is 50% opacity
*/
.transparent_thing_v1
{
background: #FF00FF;
/*
it must have a value
between 0 and 1
0 --> fully transparent
1 --> fully opaque
*/
opacity: 0.5;
}
.transparent_thing_v2
{
background: #FF00FF;
/*
or use a percentage
*/
opacity: 50%;
}
.transparent_thing_v3
{
background: rgb(255, 0, 255, 0.5);
}
.transparent_thing_v4
{
/* nerdy style if you want */
background: #FF00FF7F;
}
Reminder on Absolute / Relative Positioning
For this exercise you will probably want to both relatively and absolutely position elements, and use them in relation to each other. Here's a concrete example.
If you had a flower stem and a vase set up in html like this (flower is "inside" the vase):
<div id = "vase">
<div id = "flower_stem_01"></div>
</div>
#vase
{
/*
absolutely position
the vase on the page
*/
width : 200px;
height: 400px;
background: #0000FF;
position: absolute;
top : 50vh;
left : 50vw;
/*
lil trick to center
the vase
*/
transform: translateX(-50%);
}
#flower_stem_01
{
width : 20px;
height: 500px;
background: #00FF00;
/*
position the stem
relative to the vase
(it's "parent" element)
*/
position: relative;
top : -100px;
left : 60px;
}
Rules for the Still Life Session
- You'll be in groups of about 3 or 4. Determined by the cards.
- You'll work in the collaborative Hot Potato page, in the "room" you are assigned to.
- Collectively decide the vantage point you'd like to work from.
- Collectively decide the division of labor (i.e. who is doing what). It is fine if that changes based on your outcome, but note this somewhere in a comment in your room.
- Notate who is in your group and their roles in a comment in your room.
- If you want to share or copy-pasta information between rooms that is fine, please refrain from doing this adversarily (i.e. erasing other folks' code).
- You can use whatever reference you want, w3schools, google, etc. but no LLM-based tools (ie ChatGPT). I'll tolerate an "AI Mode" answer, but you may need to confirm something is correct. You can also ask me stuff.
- You can do sketches in real life, or overlay on your monitor or whatnot, but embrace "drawing" in CSS/HTML. The most "digital" helpful thing to do might be to take a picture of the vantage point your group is drawing from, and then use that to pick colors from.
- We'll give ~30 minutes and see if we need more time.
- After that, we'll assess the outcomes, and discuss the texture of the exercise briefly.
- Do not delete the contents of your respective room, as I'll save them.
Limitations of the Hot Potato Page
This page was made for in-class sessions like this, or sharing code snippets to determine what might be wrong with them. It currently has the ability to do the following:
- use tab to indent and shift+tab to un-indent. This should work with highlighted blocks of code.
- tags will autocomplete (i.e. if you make a div, it will make the closing div tag for you).
- there's not a robust undo system.
- everything is in one "tab" or "room" no external css or javascript files, or browsing within a folder. However, you should be able to link
- if you're using the split view, make sure to check the code periodically in the full view to make sure it is displaying correctly.
Resources
Notes
This exercise is based on a similar idea by Laurel Schwulst, by way of Mindy Seu