For the sake of brevity, please consult this depiction of my template (your web browser might give you a false positive about that website), that fiddle made with a chunk of my code and a sample of my H.T.M.L. file.
<html>
<!--[…]-->
<body>
<!--[…]-->
<article>
<div class="latest_article_preview">
<img class="latest_article_thumbnail" src="16x9_ratioed_picture.jpg" width="222" height="124"></img>
<div class="latest_article_headline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="latest_article_lede">
Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehi
</div>
<div class="read_more">
Read more…
</div>
</div>
</article>
<!--[…]-->
</body>
</html>
Each latest_article_preview visually has three sub-divisions : latest_article_thumbnail, latest_article_headline and latest_article_lede. Technically, there is a fourth one (for now called "read_more") that shall visually replace latest_article_lede.
Wherever latest_article_preview gets hovered by the cursor, latest_article_lede shall be replaced by read_more.
Still, read_more is not a link to the article page as the entire latest_article_preview box is clickable (even before the to-be-animated transitions are over).
This has to be written in vanilla C.S.S., for I know two ways to do such an interaction :
The z-index transformation trick.
The content replacement.
I first tried the content replacement. As it terribly failed when I came to combine it with animations, I went to try the z-index transformation trick.
The reason I first avoided that trick is that I find it dirty. I still chose it anyhow. But I am bugging on something : how can I make the read_more flexible box take the exact same space as the latest_article_lede one ? I tried the C.S.S.'s Position property but the results were unsatisfying either (also, I remember absolute positioning being incompatible with animations).
I searched Google to know if I could base its size, positioning and alignment parameters on latest_article_lede's without finding any satisfying answer at all (despite being sure that the Flex property could help).
… After what I plan to add animations (mostly if not only fading effects), already having those. Animations that, as said earlier do not really go with the Content property.
Any samaritan to save me on this ? Help will be much appreciated.
A simple solution would be a combination of pointer-events and opacity:
section {
width: 200px;
border: 1px solid black;
}
section div {
min-height: 200px;
padding: 20px;
position: relative;
perspective: 1000px;
}
section div:after {
content: 'Read more...';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.8);
line-height: 200px;
text-align: center;
opacity: 0;
pointer-events: none;
transition: all .2s;
transform: translateZ(200px);
}
section div:hover:after {
opacity: 1;
transform: translateZ(0);
pointer-events: auto;
}
<section>
<h1>Headline</h1>
<div class="content">Lorem Ipsum Dolor sit Amet!</div>
</section>
Related
I am new to learning HTML/CSS, and I have come across a bug in my code.
As you can see in the image below, the shoe in the header is overlapping into the "Featured Products" container. I've tried using z-index, but I'm not 100% how they work and they dont seem to be working for me.
screenshot
Any ideas as to why this is happening?
Thank you in advance,
Code:
https://hastebin.com/akelazivap.xml
set the first div's z-index to -1 and the second div's opacity to less than 1
(If you don't know what opacity is here is a link "https://www.w3schools.com/css/css_image_transparency.asp")
.first{
background: red;
height: 150px;
position: absolute;
z-index: -1;
top: 0;
}
.second{
margin-top: 150px;
background-color: green;
z-index: 2;
opacity: 0.8;
height: 200px;
}
<body>
<section class="first">
<h1>HI</h1>
<img src="https://pngimg.com/uploads/dog/dog_PNG50348.png" width="200">
</section>
<section class="second">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non sodales elit. Vivamus sodales, velit nec accumsan pellentesque, odio lorem blandit felis, eget facilisis quam lectus aliquet nulla. Pellentesque id fermentum lorem. Produi.</section>
</body>
The easiest way to fix this is to use clip: rect. You can also change transparent collor to not transparent or set max height for shoe div.
This is because of the padding: 7rem 0; you applied to section.featured in CSS. It's better to apply height for your section.featured or define a new section called section.inner-featured in section.featured and put everything in it and then apply padding-y to the inner section.
you have an alpha channel on the background color. If you set it to 1 , then it will hide the shoe.
i.e. .featured { background: rgba(255, 210, 150, 0.92);} change it to .featured {background: rgba(255, 210, 150, 1);}
I've searched for similar questions but none seem to address this specific issue, what I'm trying to do is accomplish something like this:
Label -------------------
-------------------------
-------------------------
where the "Label" is the actual label and the "-" represents my text area, I've tried everything from floats to inline the elements but I just can't figure this out, is there a way to accomplish this without having the label to be absolute therefore hiding the text when the textarea is scrollable?
I Don't know about doing this with a <textarea> without involving JS, But you can always use contenteditable
div[contenteditable] {
border: 2px solid;
font-size: 1.2em;
width: 200px;
height: 200px;
}
[contenteditable]>span {
color: orange;
}
<div contenteditable>
<span contenteditable="false">Label:</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae rhoncus felis, vel auctor tortor. Nunc porttitor arcu eget luctus feugiat.
</div>
There's room for improvements still and require management of course.
I am working with the text element that needs to be displayed vertically.
To do so I use the following CSS:
transform: rotate(180deg);
writing-mode: vertical-rl;
However, in Chromium (and other Blink browsers) the width of that element is calculated very weirdly.
To one-time fix that problem there are many ways:
Open DevTools (F12), set fixed width for that element (width: 1px) and disable that option, all goes ok.
Change the window width to a bit smaller.
Play around with the smaller text - delete line breaks (<br>), type in more or less text and etc.
Couldn't recreate the same fixes in JSFiddle. However here it is for you to see what I mean. Try opening it in browser using WebKit and other engine (i.e. Firefox) - there are different results.
https://jsfiddle.net/VoG__/qfkgt7m9/7/
Also I'm using Debian 8, but the problem appears on any OS.
What is the problem? How can I fix this issue using CSS?
.content {
padding: 30px;
background-color: #bbb;
}
.project-info {
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(2, 1fr);
}
.project-info .item {
border: 3px solid #fff;
display: flex;
flex-wrap: nowrap;
}
.project-info .item .heading {
margin-left: -1px;
margin-bottom: -1px;
padding: 10px;
color: #555;
font-size: 20px;
font-family: sans-serif;
background-color: #fff;
text-align: center;
text-transform: uppercase;
transform: rotate(180deg);
writing-mode: vertical-rl;
}
.project-info .item .text {
padding: 20px;
font-family: sans-serif;
}
<div class="content">
<div class="project-info">
<div class="item">
<div class="heading">Item long text</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie malesuada sem, ac elementum justo rhoncus vitae. Morbi nec ex quam. Donec finibus auctor odio, non faucibus ex tristique nec.</div>
</div>
<div class="item">
<div class="heading">Item</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie malesuada sem, ac elementum justo rhoncus vitae. Morbi nec ex quam. Donec finibus auctor odio, non faucibus ex tristique nec.</div>
</div>
</div>
</div>
Update 29.09.2020
The issue seems to be gone in the latest version of Chrome (and like), can't reproduce it in Firefox as well. Would accept the answer providing a screenshot of how it looked in older versions and telling why could that happen and what exactly fixed it.
Found out that this is something to do with linebreaks / wordbreaks ...
So the first (raw) solution is to keep all the heading text in one line.
.project-info .item .heading {
...
white-space: nowrap;
}
However I'm still looking for a proper answer to allow the heading text stack up in multiple lines.
I am using the following CSS ONLY code to show or hide full paragraphs. Please refer to the snippet below. Working perfectly! However, we all know that such "Show More" buttons are intended to be displayed only if the text in the paragraph is too long. The problem is that though the button is working fine here and doing its job of showing or hiding text well enough, it still shows up even when the sentence is too short or text is too limited (say like 1 or 2 line texts that can be read easily and do not require the "Show More" button). How can I hide that button and show up only when the text is long enough for the button to actually appear? Also, in case of long sentences when the show more button would actually be shown, I want 3 dots at the end of the sentence (like...) which represents that there are more text to be read. And these 3 dots show go away when the para is expanded and should come back when the para is contracted back.
P.S: I am expecting a CSS ONLY answer. No jQuery or Javascript please as I want to keep it plain and do not want to mess it up all.
.panel-wrapper {
position: relative;
width: 500px;
margin: 0 auto;
}
.show, .hide {
position: absolute;
bottom: -1em;
z-index: 100;
text-align: center;
color: red;
}
.hide {
display: none;
}
.show:target {
display: none;
}
.show:target ~ .hide {
display: block;
}
.show:target ~ .panel {
max-height: 100%;
}
.show:target ~ .fade {
margin-top: 0;
}
.panel {
position: relative;
width: auto;
max-height: 40px;
overflow: hidden;
}
.fade {
height: 20px;
position: relative;
}
<div class="panel-wrapper">
Show more
Show less
<div class="panel">
Let us not wallow in the valley of despair, I say to you today, my friends. And so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation
will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal." I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners
will be able to sit down together at the table of brotherhood. I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom
</div>
<div class="fade"></div>
</div>
<br><br><br>
<div class="panel-wrapper">
Show more
Show less
<div class="panel">
Let us not wallow in the valley of despair, I say to you today, my friends. And so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation
will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal." I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners
will be able to sit down together at the table of brotherhood. I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom
</div>
<div class="fade"></div>
</div>
<br><br><br>
<div class="panel-wrapper">
Show more
Show less
<div class="panel">
Consider this short text. Short enough to hide "Show More" button.
</div>
<div class="fade"></div>
</div>
I would recreate all the feature differently where I will rely on small hack using position:sticky and consider the use of :active/:focus instead of :target.
This cover only your first point. See comment in the code for the details.
This isn't a perfect solution, it's more an approximation as you will find some drawbacks.
.wrapper {
line-height:1.2em; /* explicitely set the height of line to easily control */
max-height: calc(2*1.2em + 2em); /* Show at max 2 line*/
width: 500px;
margin: 20px auto;
overflow: hidden;
}
.wrapper .content {
position:relative;
}
/* This will hide the show/less if the content is 2 lines or less*/
.wrapper .content:after {
content:"";
position:absolute;
top:106%; /* Start at the end of the content */
left:0;
right:0;
z-index:1;
background:#fff;
height:100px; /* A big height */
}
/**/
.wrapper :nth-last-child(1),
.wrapper :nth-last-child(2) {
/*make the element sticky so they show above the content if the content is big
and the after will no more hide them
*/
position: sticky;
bottom: 0;
background: #fff;
cursor:pointer;
outline:none;
color:red;
line-height:2em;
}
.wrapper:focus,
.wrapper:active {
outline: 0;
max-height: 400px;
}
/*make the after and the "show more" on click*/
.wrapper:focus .content:after,
.wrapper:active .content:after,
.wrapper:focus :nth-last-child(1),
.wrapper:active :nth-last-child(1) {
display:none;
}
<div class="wrapper" tabindex=-1>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ipsum nunc, hendrerit ac arcu eu, pulvinar ultrices enim. Ut at enim bibendum, iaculis turpis ac, congue dui. Etiam faucibus lectus eget lorem molestie, finibus aliquet quam pretium. Donec
eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin
massa quis, eget tellus porta, sollicitudin massa quis,</div>
<div tabindex=-1>show less</div>
<div>Show more</div>
</div>
<div class="wrapper" tabindex=-1>
<div class="content">Lorem ipsum dolor</div>
<div tabindex=-1>show less</div>
<div>Show more</div>
</div>
<div class="wrapper" tabindex=-1>
<div class="content">Lorem ipsum dolor eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin</div>
<div tabindex=-1>show less</div>
<div>Show more</div>
</div>
<div class="wrapper" tabindex=-1>
<div class="content">Lorem ipsum dolor eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin eget tellus porta, sollicitudin sollicitudin eget tellus porta, sollicitudin</div>
<div tabindex=-1>show less</div>
<div>Show more</div>
</div>
I added a ribbon effect to my h3 that looks like it's wrapped around my div. I just added a little triangle on the side and ordered it to be below the div and h3. I set the width of my h3 to 270px and the ribbon looks great is my h3 is a one-liner, but when the words occupy 2 or 3 lines, the h3 expands in height and blocks the triangle.
Is there a way to make the triangle move along with the height of the h3?
Fiddle: enter link description here
<div class="gray-bg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<div class="triangle-l"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet velit euismod, imperdiet purus a, semper eros. Aliquam lacinia tellus nec justo condimentum euismod non et dolor. Ut sit amet eleifend turpis. Pellentesque in adipiscing risus. Vivamus non accumsan nisl. Nulla accumsan velit ipsum, at aliquam arcu consectetur in. Integer vestibulum nunc a odio accumsan vehicula. Nunc at metus ullamcorper justo bibendum hendrerit. Aenean sit amet porttitor urna. Sed bibendum velit sed est eleifend, non cursus arcu hendrerit.
</p>
</div>
Also my z-index is acting weird. The triangle has a z-index of 1, the div has 50, and the h3 has 100... but the triangle is still on top of the div when it should be on the bottom.
*Not sure what the best approach is - CSS or jquery - so I'm tagging both.
I think I'd take a different approach, and create a pseudo element of the <h3> to create the triangle. Also, you can make a triangle the exact shape you want, meaning there's no need for z-index to hide the top half, and you can position it top: 100% meaning it's always correct irrespective of the content within the <h3>.
HTML:
<div class="gray-bg">
<h3>Lorem ipsum</h3>
<p>...<p>
</div>
CSS:
.gray-bg h3:after {
content:'';
display: block;
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width: 0 15px 15px 0;
height:0;
width:0;
position: absolute;
top: 100%;
left: 0;
}
Demo
Make position relative and adjust top and left
Fiddle : http://jsfiddle.net/feZbL/
.gray-bg .triangle-l{
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width:15px;
height:0;
width:0;
position: relative;
top: -48px;
left: -49px;
z-index: 1;
}
Move the triangle into the h3, and position it relative to the bottom rather than the top.
http://jsfiddle.net/4pnXp/
Note that this requires you to change the z-index of the triangle to -1 to position it behind the h3.
For bonus points, you can also do away with the .triangle-l element altogether, and use :after pseudo element to make the triagle!
http://jsfiddle.net/kE27U/
My solution was to wrap h3 and the triangle in a div then position it relative
http://jsfiddle.net/MKMs6/8/
<div class="wrap">
<h3>Lorem ipsum</h3>
<div class="triangle-l"></div>
</div>
check your solution Demo jsFiddle
Update .gray-bg .triangle-l class
.gray-bg .triangle-l{
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width:15px;
height:0;
width:0;
position: absolute;
bottom: -15px;
left: -15px;
z-index: -1;
}