Category Archives: CSS

JavaScript30—Day 3

JavaScript30 is 30-day vanilla javaScript coding challenge by Wes Bos (@wesbos). The purpose of these posts is to reflect my troubles and moments of ahhaa. Lessons from Day 3 — CSS Variables + JS: Demo - Day 3
  1. - - declares variables in CSS as $ in php or var in javaScript. You declare: 
    :root{
--basecolor:#ffc600;
}
    and call it out like this: 
    p {
 backround-color: var(--basecolor);
}
  2. :root is the deepest level you can go.
  3. If you want update your e.g. style attribute according to input via javaScript variable and name should have the same name, otherwise it wont work:
    - -basecolor:#ffc600;
  4. NodeList vs array document.querySelectorAll gives NodeList. The difference between NodeList and array is that array gives you all kinds and longer list of methods like map,reduce. List of methods for array:methods list for array List of methods for NodeList: methods for NodeList
Day 3 code on github.

JavaScript30—Day 2

JavaScript30 is 30-day vanilla javaScript coding challenge by Wes Bos (@wesbos). The purpose of these posts is to reflect my troubles and moments of ahhaa. Lessons from Day 2 — CSS-JS clock: Demo - Day 2
  1. Date() gives a chance to get hours, minutes, seconds etc. 
    const now = new Date();
seconds = now.getSeconds();
minutes = now.getMinutes();
hours = now.getHours()
  2. transform-origin vs transform:rotate() The first one sets the point around which the transformation takes place. Rotate() is driven by center of the element. More about MDN transform-origin.
Day 2 code on github.

Transparent background with readable text

It's not good idea to use opacity because the text also inherits opacity's value. One way is to use CSS3 and rgba-property: 
background:rgba(255,255,255, 0.3);
It's transparent white - 0.3 is alpha channel and it specifies the opacaty's value.

FB Like-box to be responsive

Add parent element to .fb-like-box, eg .like-wrap In you HTML:
And in your CSS: 
.like-wrap{
  width:100%;
}
.like-wrap * {
  width:100% !important;
}
* selector selects every child element in .like-wrap.