diff --git a/css-showcase/css/main.css b/css-showcase/css/main.css index 9354921..171776d 100644 --- a/css-showcase/css/main.css +++ b/css-showcase/css/main.css @@ -87,37 +87,149 @@ textarea { Author's custom styles ========================================================================== */ - * { +/* * { background: #000 !important; color: #0f0 !important; outline: solid #f00 1px !important; + } */ + html { + background-color: rgb(224, 192, 150); } - #base-div { + a { + color: black; + } + #title-text { + color: white; + } + .title { + text-align: center; + } + .title2 { + display: inline-block; + margin-left: 10px; + } + #nav { + text-align: center; + } + #title-div { display: flex; flex-direction: column; - align-items: center; + background-color: rgb(80, 80, 14); } - .title { + #about-desc, #browser-div,.explain-div { + margin: 10px; + margin-left: 15px; + background: white; + padding: 10px; + width: 90%; + display: flex; text-align: center; + justify-content: center; + } + #browser-div { + flex-direction: column; + } + #disp-exp-div, #vis-exp-div, #cont-exp-div { + display: none; + } + #click { + margin-left: 10px; + margin-right: 10px; } - #img-div, #img-text-div { + #reset { + margin-bottom: 10px; + } + #img-text-div { + display: flex; + flex-direction: column; + align-items: center; + } + #browser-show{ + border: none; + background-color: inherit; + cursor: pointer; + font-size: 20px; + } + #browser-show-div { + background-color: lightgrey; display: flex; justify-content: center; - justify-content: space-evenly; + padding: 1em; + } + #browser-div { + display: none; } .img-text-content { - margin-left: 80px; + border: none; + background-color: inherit; + cursor: pointer; + display: inline-block; + font-size: 25px; + } + .img-text-content:hover{ + background: #999999; + } + .img-content, .img-text-content { + margin: 1em; + } + #why-div { + display: flex; + flex-direction: column; + align-items: center; + } + #why-img { + object-fit: cover; + } + #why-desc { + margin: 1em; + text-align: center; } - #display-text { - padding-left: 30px; + #outro { + text-align: center ; } - #visibility-text { - padding-left: 50px; + @media (max-width: 587px){ + #top{ + display: none; + } + #content-image, #display-image { + display: none; + } + #img-text-div{ + text-align: center; + } + #img-div { + display: flex; + justify-content: center; + } + #about-desc, .explain-div, #browser-div { + margin: auto; + margin-left: 10px; + margin-bottom: 15px; + } } - #content-text { - padding-right: 40px; + @media (min-width: 587px){ + .container { + margin:0 auto; + width:960px; + background-color: tan; + } + #top { + position: fixed; + background-color: grey; + left: 1350px; + top: 600px; + padding: 10px; + border-radius: 5px; + } + #img-div, #img-text-div { + display: flex; + justify-content: center; + } + #about-desc, #browser-div, .explain-div { + margin-left: 35px; + } } - + /* ========================================================================== diff --git a/css-showcase/img/CV-chunks.jpg b/css-showcase/img/CV-chunks.jpg new file mode 100644 index 0000000..e957edc Binary files /dev/null and b/css-showcase/img/CV-chunks.jpg differ diff --git a/css-showcase/index.html b/css-showcase/index.html index d6aa0cd..897b539 100644 --- a/css-showcase/index.html +++ b/css-showcase/index.html @@ -1,10 +1,10 @@ - + - Week-5 Part-1 - + Paolo's CSS-Showcase + @@ -23,36 +23,108 @@ -
-

Content-Visibility

-

The Differences

+
+

back to top

+
+ +
+
+

Content-Visibility CSS-Showcase

+
+
+
+

What is the Content-Visibility Property?

-
-

Hover Over the Text to Execute Command

-
+
+

The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. Basically it enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

+
-
-

Display: None;

-

Visibility: None;

-

Content-Visibility: None;

+

Browser Compatability

+ +
+ +
+
+

Chrome ------------ Full Support ------------ 85

+
+

Edge ------------ Full Support ------------ 85

+
+

Firefox ------------ No Support ------------ //

+
+

Internet Explorer ------------ No Support ------------ //

+
+

Opera ------------ Full Support ------------ 71

+
+

Safari ------------ Full Support ------------ 15.4

+
+

WebView Android ------------ Full Support ------------ 85

+
+

Chrome Android ------------ Full Support ------------ 85

+
+

Firefox for Android ------------ No Support ------------ //

+
+

Opera Android ------------ Full Support ------------ 60

+
+

Safari on IOS ------------ Full Support ------------ 15.4

+
+

Samsung Internet ------------ Full Support ------------ 85

+
- -
- Dancing Towers in Seoul - - Dancing Towers in Seoul - - Dancing Towers in Seoul + +
+

Why Use It?

+ +

Applying content-visibility: auto; to chunked content areas gives a 7x rendering performance boost on initial load.

+ + +
+
+

Execute Command on Middle Picture

+
-
+
+ +
+

The display: none; property Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead. +

+
+ + +

The visibility: hidden; property is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).

+ + +

The content-visibility: hidden; property skips its elements contents. The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable. This is similar to giving the contents display: none.

+ +
+ + + +
+ Dancing Towers in Seoul + + Dancing Towers in Seoul + + Dancing Towers in Seoul +
+
+
+ +

By: Paolo Bautista

+
+ diff --git a/css-showcase/js/main.js b/css-showcase/js/main.js index e69de29..a48287b 100644 --- a/css-showcase/js/main.js +++ b/css-showcase/js/main.js @@ -0,0 +1,60 @@ +// Declare Button Variables +const displayButton = document.querySelector('#display-text'); +const visibilityButton = document.querySelector('#visibility-text'); +const contentButton = document.querySelector('#content-text'); +const resetButton = document.querySelector('#reset'); + +const dispExpDiv = document.querySelector('#disp-exp-div'); +const visExpDiv = document.querySelector('#vis-exp-div'); +const contExpDiv = document.querySelector('#cont-exp-div'); + +const middlePic = document.querySelector('#visibility-image'); + +//--------------------------------------------------------------- + +// Change css for each button attribute +displayButton.onclick = function disp() { + middlePic.style.display = "none"; + dispExpDiv.style.display = "block"; + visibilityButton.style.display = "none"; + contentButton.style.display = "none"; +} + +visibilityButton.onclick = function vis() { + middlePic.style.visibility = "hidden"; + visExpDiv.style.display = "block"; + displayButton.style.display = "none"; + contentButton.style.display = "none"; +} + +contentButton.onclick = function cont(){ + middlePic.style.contentVisibility = "hidden"; + contExpDiv.style.display = "block"; + displayButton.style.display = "none"; + visibilityButton.style.display = "none"; +} + +resetButton.onclick = function reset(){ + middlePic.style.contentVisibility = "visible"; + middlePic.style.visibility = "visible"; + middlePic.style.display = "block"; + contExpDiv.style.display = "none"; + visExpDiv.style.display = "none"; + dispExpDiv.style.display = "none"; + displayButton.style.display = "block"; + visibilityButton.style.display = "block"; + contentButton.style.display = "block"; +} + +//--------------------------------------------------------------- + +const browserButton = document.querySelector('#browser-show-div'); +const browserList = document.querySelector('#browser-div'); + +browserButton.onclick = function browser() { + if (browserList.style.display === "none") + browserList.style.display = "block" + else { + browserList.style.display = "none"; + } +} \ No newline at end of file