This content originally appeared on DEV Community and was authored by Sayan Mandal
Journal:
In this section, I'm supposed to create a Set of Colored Markers.
Project:
Today's lesson was mostly about the color theory and how differently we can insert color. I learnt a bit of color wheel functionality. We can use rgba to select colors. R is for Red, G is for Green and B is for Blue, we select a value from 0 to 255 to choose the color. A is alpha which works as opacity of the color.
RGB is used in electronic devices, but printing uses CMYK, which stands for Cyan, Magneta, Yellow, Key(Black).
For example,
rgb(255, 0, 0) is for RED
rgb(0, 255, 0) is for GREEN
rgb(0, 0, 255) is for BLUE
rgb(0, 0, 0) is for BLACK
rgb(255, 255, 255) is for WHITE
Like RGB there are other methods to specify a color. e.g HEX(hexadecimal code), HSL(Hue, Saturation, and Lightness), HWB (Hue, Whiteness, Blackness).
We can find color pickers on various websites. RGB, HEX, HSL, HWB, CMYK .
Color Gradient:
linear-gradient is for creating color gradient for webpages.
Syntax:
background-image: linear-gradient(direction, color-stop-1, color-stop-2,...);
direction is for the gradient line's angle. 0deg is value is to top, increasing values rotate clockwise from 0deg.
color-stop is for the value of color and a stop from 0% to 100%(or length) along the gradient's axis.
CSS Gradient has a great tool for creating gradients and directly copy the css code.
Box Shadow:
box shadow is to add shadow to the content.
Syntax:
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit
h-offset is for the horizontal offset of the shadow, v-offset is for the vertical offset of the shadow, blur is for blur radius, spread is for the spread radius, color is for the color of the shadow, inset to change the shadow from out to inner.
Overall, most of today's work was focused on color, gradient and shadow styling.
I also have published notes on my Github.
Productivity:
Productivity Score: 8
Enjoyment Score: 7
I completed the module in less than the time I blocked for, although I liked the styling and color theory but I felt the module was really short. Also, I need to read more about color theory.
Outside Links:
Wallpaper on my PC: Marko
Productivity Score: Ruby Granger
Some Music while I took the lesson.
This content originally appeared on DEV Community and was authored by Sayan Mandal
Sayan Mandal | Sciencx (2023-03-16T20:05:35+00:00) Day 3 of Responsive Web Design. Retrieved from https://www.scien.cx/2023/03/16/day-3-of-responsive-web-design/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.