Remove only text-shadow from selected text with just CSS - css

I styled some text to have a faint white text-shadow so that when it passes on a same-color background, it's style legible. The issue comes in that when I select the text, it becomes difficult to read thanks to the text-shadow being the same color as the text.
body {
background-color: #CCC;
margin: 0px;
}
div {
padding: 1.5em;
}
div + div {
margin: 2em 0 0;
}
div p:last-child {
margin: 0em;
}
p {
text-shadow: 0 0 3px #FFF;
margin: 0 0 1em;
}
.actual-effect ::selection {
text-shadow: none;
}
.intended-effect p {
text-shadow: none;
}
<div class="actual-effect">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Optime, inquam. Istam voluptatem, inquit, Epicurus ignorat? Inde igitur, inquit, ordiendum est. Eam tum adesse, cum dolor omnis absit; Ne discipulum abducam, times. </p>
<p><i>Certe non potest.</i> <mark>Honesta oratio, Socratica, Platonis etiam.</mark> Duo Reges: constructio interrete. Recte dicis; Hoc loco tenere se Triarius non potuit. </p>
<p>Non igitur bene. Utram tandem linguam nescio? <b>Quis est tam dissimile homini.</b> Quae sequuntur igitur? Quod ea non occurrentia fingunt, vincunt Aristonem; Hoc ipsum elegantius poni meliusque potuit. </p>
</div>
<div class="intended-effect">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Optime, inquam. Istam voluptatem, inquit, Epicurus ignorat? Inde igitur, inquit, ordiendum est. Eam tum adesse, cum dolor omnis absit; Ne discipulum abducam, times. </p>
<p><i>Certe non potest.</i> <mark>Honesta oratio, Socratica, Platonis etiam.</mark> Duo Reges: constructio interrete. Recte dicis; Hoc loco tenere se Triarius non potuit. </p>
<p>Non igitur bene. Utram tandem linguam nescio? <b>Quis est tam dissimile homini.</b> Quae sequuntur igitur? Quod ea non occurrentia fingunt, vincunt Aristonem; Hoc ipsum elegantius poni meliusque potuit. </p>
</div>
I'm not sure how other browsers render this, but currently in Firefox it accurately removes the text-shadow, but it loses all of the default stylings it would have had had I not changed it (ie. white text, blue background, inverted colors when juxtaposed against a certain backgrounds, etc).
Is there a way to modify ::selection without losing all of the default values? I'd rather not re-add all of the default styles unless that were the only option available.

The issue isn't avoiding that the text-shadow makes things difficult to read, it's more-so trying to avoid p::selection from losing everything else.
Sorry for previous answer 😔🙏.
You can set the text-shadow to 0 0 0.
Example :
body {
background-color: #CCC;
margin: 0px;
padding: 1.5em;
}
p {
text-shadow: 0 0 3px #FFF;
margin: 0 0 1em;
}
::selection {
text-shadow: 0 0 0 !important;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Optime, inquam. Istam voluptatem, inquit, Epicurus ignorat? Inde igitur, inquit, ordiendum est. Eam tum adesse, cum dolor omnis absit; Ne discipulum abducam, times. </p>
<p><i>Certe non potest.</i> <mark>Honesta oratio, Socratica, Platonis etiam.</mark> Duo Reges: constructio interrete. Recte dicis; Hoc loco tenere se Triarius non potuit. </p>
<p>Non igitur bene. Utram tandem linguam nescio? <b>Quis est tam dissimile homini.</b> Quae sequuntur igitur? Quod ea non occurrentia fingunt, vincunt Aristonem; Hoc ipsum elegantius poni meliusque potuit. </p>
Previous Answer (unsatisfactory)
It's because background, change that. I'm try use background-color: transparent, but it's not work. So, in this code i use background-color: #fff.
p {
text-shadow: 2px 2px #FF0000;
}
p::selection {
background-color: #fff;
text-shadow: none;
}
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem numquam, laboriosam distinctio impedit qui explicabo corporis optio commodi officiis ratione voluptates corrupti, temporibus iusto recusandae facilis nobis obcaecati nisi quisquam iste ullam excepturi iure. Ratione, molestiae mollitia vitae, error soluta illum ex accusamus voluptatem tempora hic aut rerum! Recusandae impedit consectetur consequatur dolorum, dolore aut officiis nam tenetur aliquid repudiandae natus velit sapiente vero esse, dolor quasi illo at consequuntur aperiam explicabo iusto corporis ex fugit architecto? Placeat, unde suscipit expedita enim ab vel iste cumque quas, asperiores adipisci accusamus? Et, minus. Saepe magni quo, ipsam enim earum placeat voluptates.</p>

Related

Why is scroll-margin not working in Nuxt?

I am working in a Nuxt app and using CSS based smooth scrolling to anchor links. The smooth scroll itself works but the scroll-margin property is achieving nothing... it is seemingly completely ignored. The exact same code works fine outside of the Nuxt app so I wonder whether it is something to do with Nuxt.
Slimmed down version of the code is as follows and I have also created a (working) non-Nuxt codepen to show the code in action outside of Nuxt.
For the sake of clarity, I want to use CSS only to achieve smooth scrolling with a scroll margin in Nuxt. I do not want to use JavaScript or built in Vue / Nuxt features. If I have to I will but, at the very least, I'd like to know why scroll-margin is not doing anything.
HTML
<main>
<header>Fixed header</header>
<section>Click this link to scroll to a section further down the page and show the targeted state. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
<section id="scroll-section"> <strong class="show-on-target">Check out the space between this block and the header 👆 The block is clear of the header thanks to the <code>scroll-margin</code> property. The block was blue before you clicked the link and this text wasn't here either.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
</main>
SCSS
* {
box-sizing: border-box;
font-family: helvetica;
margin-inline: 0;
line-height:1.5;
}
html {
scroll-behavior: smooth;
}
header {
position: fixed;
display: grid;
place-content: center;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 3rem;
background: #ed6a5a;
font-size: 1.5rem;
}
section {
background: #9bc1bc;
padding: 50px 30px;
&:nth-child(2n) {
background: #f4f1bb;
}
&:first-of-type {
padding-block-start: 20vh;
}
}
strong {
font-size: 1.2em;
}
code {
font-family: monospace;
}
:target {
scroll-margin: 5rem;
background: #F2D7EE;
.show-on-target {
display: block;
margin-block-end: 20px;
}
}
.show-on-target {
display: none;
}
What I tried:
Using the code above to create a CSS-only smooth-scroll including a scroll-margin. I also tried tweaking the code above to use section, [id], section[id] and #myAnchor in place of :target but to no avail.
What I was expecting:
Page to scroll smoothly to the anchor leaving a 5 rem margin above it.
What actually happens:
Page scrolls smoothly to the anchor but with no margin above it

CSS width, should I use max width with percent or by pixel

Let's say I have a container, and I want it to be 1200px wide on large screens, and on screens that are <= 1200px, I want it to take all of the window's width.
The question is - which CSS syntax is a better practice, and why?
1)
.container {
width: 1200px;
max-width: 100%;
}
<div class="container" style="border: 5px solid magenta; background-color: black; color: white; padding: 1em;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, ea, nemo. Sequi saepe aut eius voluptatum doloribus! Aliquam corporis vitae eveniet, sapiente eos similique voluptatum molestiae, nostrum animi facere, voluptatibus nemo maxime voluptas ipsum atque! Molestias obcaecati totam pariatur vel.
</div>
2)
.container {
width: 100%;
max-width: 1200px;
}
<div class="container" style="border: 5px solid cyan; background-color: black; color: white; padding: 1em;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, ea, nemo. Sequi saepe aut eius voluptatum doloribus! Aliquam corporis vitae eveniet, sapiente eos similique voluptatum molestiae, nostrum animi facere, voluptatibus nemo maxime voluptas ipsum atque! Molestias obcaecati totam pariatur vel.
</div>
I checked on various browsers and devices, both of the CSS options worked good.

Why is my margin bottom on my float not correct?

I have a content box in which I want a div box that floats to the left and paragraphs that flow around it. So far my HTML looks like this:
.content {
float: left;
padding: 20px;
width: 650px;
height: 500px;
background-color: #F5CF8E;
/* Yellowish */
}
.fake-image {
float: left;
width: 200px;
height: 200px;
border: 0.5px solid gray;
padding: 20px;
margin: 0 20px 20px 0;
}
<div class="content">
<div class="fake-image"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>
What I really don't get is why is the margin-bottom: 20px; of my .fake-image not working? The margin is bigger. Can anyone help?
Here an image of what I mean:
This space is not extra margin. It's the remainder of the height of the wrapping line
In other words, the line that breaks under the image may not break perfectly to match the exact spot where your margin ends unless your lines perfectly divide that space somehow. It would be unreasonable to try to control this for most situations, however, hypothetically you could accomplish a fix if it were completely static content, but I don't recommend trying to do this because you might be fighting an uphill battle.
To test this for yourself: remove all margins except for your bottom margin on your image and manipulate line-height and typography stylings to see how they play together and/or manipulate only the bottom margin on that image and/or the image height.
Whenever I have an issue like this, I add specificity to the related CSS. margin in this case. margin: 0 20px 20px 0; shorthand for margin-top:0; margin-right: 20px; margin-bottom:20px; margin-left:0;
Fix the bottom by knowing also what is around it.
Here I add a div around it and set it's background so you see where the image actually IS. Other space belongs to other elements.
Now, we have the ugly lime and red we can see what is what, adjust that image and paragraphs etc., then we can later remove those ugly CSS things.
.content {
float: left;
padding: 20px;
width: 650px;
height: 500px;
background-color: #F5CF8E;
/* Yellowish */
}
.fake-image {
float: left;
width: 200px;
height: 200px;
border: 0.5px solid gray;
padding:20px;
/* margin-top: 0;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px; */
margin: 0 20px 20px 0;
}
.outside-image{float: left;background-color:lime;}
p {border:1px solid red;}
<div class="content">
<div class="outside-image"><div class="fake-image"></div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>

How to make a toggleable navbar in pure CSS?

I'm trying to make a navigation bar with pure HTML and CSS which doesn't require any JavaScript to open and close.
I'm having an issue with the navigation bar remaining open. When I set display: none or visibility: hidden to get desired functionality, the hyperlink doesn't function anymore.
http://codepen.io/anon/pen/dOMYEj
Is this possible? Thanks!
when you use display:flex ,position:absolute ,relative and fixed does not behave as expected.check this link
Modified markup and css a bit .please check the following snippet
* {
font-family: sans-serif;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: white;
align-items: center;
box-sizing: border-box;
box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div {
height: 5vh;
width: 10vw;
position: fixed;
top: 0;
padding: 3px;
right: 0;
}
.icon {
display: inline;
}
nav > h1 {
font-family: cursive;
font-size: 1.2rem;
padding-left: 10px;
color: blue;
}
nav li {
list-style: none;
display: inline;
font-size: 1.2rem;
padding: 10px;
cursor: pointer;
}
nav a {
color: darkgray;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a:active {
color: blue;
}
nav li:first-child * {
color: blue;
}
nav ul {
width: 50vw;
}
nav h1,
nav ul {
font-size: 2rem;
}
nav > input {
display: none;
}
nav > label {
display: none;
}
input {
display: none;
}
section {
font-size: 2rem;
padding: 1vh 5vh 0 5vh;
}
section#top {
margin-top: 5.5vh;
}
#media (max-width: 5000px) {
/* changed to 5000 so it is always collapsed */
nav {
height: 6vh;
text-align: center;
justify-content: space-between;
}
nav li {
display: block;
border: solid 1px blue;
margin: 0 auto;
}
#links {
visibility: hidden;
}
section#top {
margin-top: 10vh;
}
input:checked + nav ul#links {
visibility: visible;
position: absolute;
right: 30px;
}
input:not:checked +nav ul#links {
visibility: hidden;
}
nav {
color: blue;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="taco.css">
<title>Test Page</title>
</head>
<input type='checkbox' id='one'>
<nav class="toggleable" tabindex="1">
<h1>Test Page</h1>
<div>
<label for="one">☰</label>
<ul id="links">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Hours
</li>
<li>Directions
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
<main>
<section id="top">
<h1>Welcome</h1> awefore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia
reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="about">
<h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="menu">
<h1>Menu</h1> Lorem ipsum dolor styktyktyktyking elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="hours">
<h1>Hours</h1> Lorem ipsum dolor sit rtyr657456ydfghfvgyjktyuicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="directions">
<h1>Directions</h1> Lorem ipsuaw4yae4yah34rtaw3789t. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="contact">
<h1>Contact</h1> Lorem ipsum dolor 3456345789ru8ghiuretur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
</main>
</html>
Hope it helps
I was able to finally create it. I really hope this helps someone out.
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="taco.css">
<title>Test Page</title>
</head>
<nav>
<header><h1>Test Site</h1></header>
<div id="navigation">
<button>☰</button>
<ul id="links">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Hours
</li>
<li>Directions
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
<main>
<section id="top">
<h1>Welcome</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt consectetur suscipit in, vitae voluptas, dolorum consequatur sequi animi deserunt maxime quae sint dolorem dolores aliquid totam qui architecto ab beatae.
reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="about">
<h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="menu">
<h1>Menu</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam quo quia quod eius aliquam adipisci molestias vel, sapiente ex nobis, eligendi a inventore nihil sit aut molestiae voluptatibus culpa.
</section>
<section id="hours">
<h1>Hours</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam iste consequatur impedit, voluptatum saepe vero harum quod, repudiandae maxime dolorum non. Adipisci, tempore, quisquam! Est dolorem obcaecati distinctio explicabo veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta deserunt adipisci, debitis dolor ex consectetur iusto repellat molestias velit suscipit laudantium enim quae autem eveniet repudiandae sit. Facilis, quis, at.
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="directions">
<h1>Directions</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, ipsam, optio reiciendis sit quidem beatae consequatur alias nulla labore! Vel quibusdam neque consequatur est tempora quas omnis placeat ab ex.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, sit amet dolores. Nobis corrupti nihil, officiis maiores eligendi modi quo, minus? Expedita, corrupti ullam nobis cum, quibusdam ipsa quo ex!
adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="contact">
<h1>Contact</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus ducimus fuga qui dignissimos reiciendis voluptatibus ea iusto dolorem doloribus eius similique impedit, molestiae consequuntur non ratione enim, ullam laboriosam. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
</main>
</html>
CSS:
* {
font-family: sans-serif;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: white;
align-items: center;
box-sizing: border-box;
box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div#navigation {
height: 5vh;
width: 10vw;
position: fixed;
top: 1vh;
padding: 1vw;
right: 25vw;
}
.icon {
display: inline;
}
nav header {
top: 1vw;
left: 1vw;
position: fixed;
}
nav header > h1 {
background-color: rgba(255, 255, 255, .5);
font-family: cursive;
font-size: 2rem;
padding-left: 1vw;
color: blue;
left: 0;
}
nav li {
list-style: none;
display: inline;
font-size: 1.2rem;
padding: 1vh;
cursor: pointer;
}
nav li:focus {
color: blue;
}
nav a {
color: darkgray;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a:active {
color: blue;
}
nav li:first-child * {
color: blue;
}
nav ul {
width: 50vw;
}
nav h1,
nav ul {
font-size: 2rem;
}
nav #links {
background-color: rgba(255, 255, 255, .9);
}
button {
display: none;
}
input {
display: none;
}
section {
font-size: 2rem;
padding: 1vh 5vh 0 5vh;
}
section#top {
margin-top: 5.5vh;
}
section > h1 {
margin-top: 8vh;
color: blue;
}
/* Changed to 9999px so it's always collapsed */
#media (max-width: 9999px) {
button {
font-size: 1.75rem;
border: 0;
background: white;
cursor: pointer;
display:block;
}
button:focus {
outline: 0;
}
nav div#navigation {
right: 0;
}
nav li {
display: block;
border: solid 1px blue;
margin: 0 auto;
}
#links {
display: none;
background-color: white;
}
button:focus + #links,
#links:hover {
display: block;
position: absolute;
right: 5vw;
}
nav {
color: blue;
}
section > h1 {
margin-top: 6.25vh;
color: blue;
}
nav header > h1 {
margin: 0;
padding: 0;
font-size: 2rem;
}
}
Demo

CSS white inner shadow

How can I make white inner shadow in the div?
I've trying with other colors — works fine, but with white color that don't work.
JSBin example
Thanks!
Update:
I need something like this:
Alternatively, you can create a simple overlay on the layer above the content and make it your box-shadow
.container {
height: 300px;
width: 300px;
background: #fff;
border: 1px solid #cecece;
border-radius: 4px;
position: relative;
}
.container .content {
overflow: auto;
height: 100%;
}
.container:after {
width: calc(100% - 20px);
height: 110px;
background: linear-gradient(180deg, #fff, transparent);
position: absolute;
top: 0;
left: 0;
content: close-quote;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nesciunt quo fuga quasi vero modi aspernatur
nemo harum sapiente nobis ex aliquam excepturi possimus sit laboriosam libero adipisci non aliquid.Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Dicta libero modi debitis ipsa architecto nihil
exercitationem cumque natus ducimus at quae doloribus illum optio aut expedita eveniet magnam officiis
qui!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam officia reiciendis doloremque neque
debitis aperiam voluptates non libero atque ut iure rem consequuntur alias commodi velit asperiores sit
nesciunt minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolor ab animi ullam id
incidunt tempore atque doloremque quidem quaerat soluta eaque expedita aspernatur velit reprehenderit
doloribus similique. Quod non.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit delectus iste
aliquid vero ut? Odio quas asperiores odit velit vitae aspernatur beatae! Adipisci molestias placeat maiores
eos voluptatum assumenda sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci similique
quos fugit nostrum neque sit repudiandae error laborum possimus voluptatum molestiae impedit quo repellendus
minus corrupti doloribus itaque ipsa consequatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consequuntur molestias odit numquam soluta veniam saepe incidunt dolore praesentium nobis labore amet cumque
aliquam et consectetur est at quis voluptas doloremque?
</div>
</div>
</body>
</html>
box-shadow: grey 0px 30px 40px -2em inset;
Use grey into white.
If I understood well, you want a white shadow inside a white input? You need a different color to make the shadow.
I have maybe misunderstood, don't know. Tell me if this helped or if I just didn't understand.

Resources