I'm trying to setup a design where background images "open/close" around a paragraph. I tried setting it up so that two divs were added to the paragraph's container, and them set them up with position:absolute and all that jazz, but the "closing" image will always stick to the far right of the container instead of sticking the the last word of the paragraph.
Is it possible to set this up without javascript?
Here's an example of what I'm trying to setup:
Yes, you can do it using :before and :after. Check out the below snippet:
p:before, p:after {
content: ' ';
position: absolute;
background-color: #f00;
padding: 15px;
margin-top: -5px;
font-size: 0;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/VisualEditor_-_Icon_-_Block-quote.svg/60px-VisualEditor_-_Icon_-_Block-quote.svg.png") -28px -25px;
}
p:before {
left: 10px;
background-position: -3px -5px;
}
p {
text-indent: 30px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni labore explicabo molestias, libero similique veniam unde, cum quas neque architecto, consectetur, pariatur porro ex et dolorem voluptatibus repellat! Numquam, voluptate!</p>
Not even buggy. Works nice. Check.
Related
I'm making a react - redux application and I've recently run into a problem where I need to display a line next to certain text, to make it look like a quote. I used the border property in CSS and it came out like this.
But I would like it to be with corner radius in its places, like the following image,
This is the CSS and the HTML I am using to get,
.post-quote-layout{
margin-top: 16px;
background-color: white;
border-left: #6D45FC solid 6px;
height: 100%;
}
.post-quote-text{
font-size: 17px;
background-color:white;
margin-left: 10px;
line-height:26px;
}
<div key={index} className="post-quote-layout">
<div className="post-quote-line">
<p className="post-quote-text" dangerouslySetInnerHTML={{__html:item?.text}} />
</div>
</div>
How do I achieve the result, I would like the line to be responsive as the content increases too.
Use a pseudo-element positioned absolutely like so
div {
width: 50vw;
margin: auto;
position: relative;
padding-left: 10px;
}
div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: rebeccapurple;
border-radius: 3px
}
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa sequi mollitia assumenda repudiandae impedit quidem, ducimus adipisci a ullam tenetur minus minima molestias provident recusandae non amet sapiente nihil ad, commodi ut optio veniam illo
qui! Enim, neque odit? Laboriosam quasi aperiam, molestiae culpa ipsum corrupti animi praesentium atque exercitationem.</p>
</div>
Instead of using borders, have you tried using an svg line with its stroke-linecap property set to round?
stroke-linecap: round;
https://css-tricks.com/almanac/properties/s/stroke-linecap/
EDIT: Here is another approach if you want to stick to borders:
CSS border stroke line cap rounded
I have a <textarea> that needs to have a word at the beginning, ie.: Message:
So, I applied text-indent to this.
The problem is that this text has a number in the end, so it can vary in lenght, ie.. Message 2: or Message 76:.
Example:
.container {
font-size: 15px;
position: relative;
font-family: sans-serif;
}
textarea {
border-radius: 8px;
font-size: 15px;
resize: none;
font-family: sans-serif;
height: 150px;
width: 220px;
text-indent: 86px;
padding: 12px 16px;
}
span {
left: 17px;
top: 13px;
font-weight: 600;
position: absolute;
}
<div class="container">
<textarea name="" id="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id asperiores voluptatibus quidem quasi est, dolorum similique dolor facere ut recusandae! Eaque, quas! Atque officia doloremque odio distinctio deleniti commodi debitis.
</textarea>
<span>Message 4:</span>
</div>
How can I put a text at the beginning so that, when it has a longer length, it doesn't invade the <textarea> text?
I am trying to achieve this using only CSS.
Maybe there is a different way instead of using indentation, but I still haven't figured out. Also because the absolutely positioned element is fixed there.
This question already has answers here:
Every item to have the same width as the widest element [duplicate]
(3 answers)
Flex box to assign largest child width to other child width
(3 answers)
Vertical buttons with equal width
(2 answers)
Closed 4 years ago.
I have a page with two div tags. One is a text and the other is a button beneath the text. The texts varies so I can not set it to a fixed size and the tekst element rescales as I zoom in and out. I want the button to
1: always be the same size as the text element
2: scale in the same way as the text element.
How can I do this?
.tekst{
padding:1rem;
font-size: 1rem;
border:0.1rem black solid;
margin-left: 2rem;
max-width: 75rem;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 1rem;
text-align: center;
text-decoration: none;
display: inline-block;
max-width:75rem;
}
CSS Solution
Without knowing the structure of your HTML it's difficult to give an exact solution. However you do say that the button is to be displayed below the text. Therefore a CSS only solution could be to wrap both text and button in a div with display:inline-block so that its width shrinks to its contents. You would then set .button to have width: 100%, thus filling the width of its parent. Because .tekst would be then be setting the width of the parent (remember, the parent is shrinking to fit its content), .button would necessarily have the same width as tekst.
CSS:
.tekst-button-parent {
display: inline-block;
}
.tekst {
...
}
.button {
width: 100%;
...
}
HTML:
<div class="tekst-button-parent">
<div class="tekst"> ... </div>
<div class="button"> ... </div>
</div>
You may need to further style tekst-button-parent to occupy the same position in which your two elements currently reside.
JavaScript Solution
Alternatively you could use JavaScript to set the width of .button to be the same as .tekst everytime the window loads or resizes. If you only have the two occurrences of those divs then identifying the divs by className will be easy.
<script>
var setButtonSize = function(event) {
var width = document.getElementsByClassName( "tekst")[ 0 ].innerWidth;
document.getElementsByClassName( "button")[ 0 ].style.width = width + "px";
};
window.onresize = setButtonSize;
window.onload = setButtonSize;
</script>
If you have more than one pair of .tekst and .button then you'll need to match each pair before resizing.
You should add an javascript function that calculats the width and set the width of the button
example:
$(function(){
resize();
});
$(window).resize(function() {
resize();
});
function resize(){
$(".button").each(function(){
var width = $('.text').width();
var height = $('.text').height();
$(this).css({'width': ''+width , 'height': ''+height })
});
}
.tekst{
padding:1rem;
font-size: 1rem;
border:0.1rem black solid;
margin-left: 2rem;
max-width: 75rem;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 1rem;
text-align: center;
text-decoration: none;
display: inline-block;
max-width:75rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id soluta dolores eius quaerat quae nihil debitis reprehenderit et atque, repudiandae itaque iste molestiae nostrum eum laboriosam, unde molestias praesentium aperiam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id soluta dolores eius quaerat quae nihil debitis reprehenderit et atque, repudiandae itaque iste molestiae nostrum eum laboriosam, unde molestias praesentium aperiam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id soluta dolores eius quaerat quae nihil debitis reprehenderit et atque, repudiandae itaque iste molestiae nostrum eum laboriosam, unde molestias praesentium aperiam?
</div>
<div class="button">
</div>
Actually i don't know what this is called so i rather posted the image, i was going through a website and i saw this that the icon was aligned on the left side and the text was on the right side now i liked the thing that how much ever the big text is it is not going below the icon its breaking the line in its linear position. How to achieve this. Also what is this called?
The solution ( JS Fiddle ) is a combination of position: absolute and using font awesome icons in a CSS pseudo element:
.example {
width: 300px;
margin: 0 auto;
position: relative;
}
.example::before {
content: "\f041";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 32px;
padding-right: 0.5em;
position: absolute;
top: 0;
left: -30px;
}
All the HTML you need is a single element (a div in this example):
<div class="example">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem commodi obcaecati, explicabo culpa iusto quae magni atque officiis nam qui sit inventore suscipit expedita facilis eum quas voluptatum laborum impedit.
</div>
This code is based on astronautweb.co and their list of CSS values for Font Awesome icons.
Google wasn't giving me anything helpful :(
I'm after a way of having an image have a 100% width, and a fixed height, say, 400px, and not stretch horribly, and instead of stretching, zoom in?
I think I'm after something not dissimilar to what backstretch does, but not for full screen backgrounds.
I think this video kind of shows what I'm after in a few instances (I think the eagle picture shows what I'm looking for) http://www.teehanlax.com/resources/img/story/medium/prototypes/feature-header.mp4
100% width picture, that's a fixed height, that shows a cropped image, and that scales with the browser.
http://jsfiddle.net/XcYfS/2/
<style>
img {
width: 100%;
height: 400px; }
h1, p {
width: 80%;
padding-left: 10%; }
</style>
<img src="http://placekitten.com/200/300" alt="">
<h1>Interesting Title!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>
To avoid Distortion i think its best to use jQuery for this.
You can use jQuery Supersized plugin for this. It's one of the famous plugins mostly used on sites with grounds covering 100% of the width.
Here's the link for the site - http://buildinternet.com/project/supersized/
Try this one. Click Here for Preview
I have edited your sample code
HTML:
<div class="wrapper">
<img src="http://placekitten.com/200/300" alt="" />
</div>
<h1>Interesting Title!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>
CSS:
div.wrapper{
display: inline-block;
width:500px;
height:400px;
border:1px solid red;
overflow:hidden;
}
img {
width: 100%;
height: auto;
}
h1, p {
width: 80%;
padding-left: 10%;
}
The parent element of your image should be display:inline-block; and the width will be the width of your img.
if you want to position the image, lets say you want to show the center of the image, just add a negative margin-top to the img. Click Here for Preview
img {
width: 100%;
height: auto;
margin-top:-100px;
}