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 @@ - +
-back to top
+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.
+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
+Applying content-visibility: auto;
to chunked content areas gives a 7x rendering performance boost on initial load.
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.
By: Paolo Bautista
+