How can I make The Link-area like 3 px bigger than the image. I have made an audio-player with a 3px progressbar. But 3px are a bit small for a mouseclick and especially on mobiles. So how can I add like to link 3px to the top and to the bottom?
#gutter {
background: white;
height: 3px;
width: 100%;
position: absolute;
top: 87px;
z-index: 5;}
Try something like this: JSFiddle
I made up a simplified version to demonstrate the effect.
<img class="image" src=""/>
a.link {
display: inline-block;
margin: 0;
padding: 0;
}
img.image {
width: 3px;
height: 3px;
margin: 3px;
padding: 0;
}
Related
I have a little mark at the bottom right of my own code snippet page, which should also contain my website's favicon. I want to use ::before for this but I have no clue how to resize the image to stay inside the 1em by 1em pseudo-element.
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
display: inline-block;
}
<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
Lampe2020.de
</div>
I want the favicon to be fully visible but shrunk down to 1em by 1em.
I've tried CSS object-fit but it had absolutely null effect on the image no matter what I set it to. overflow: hidden or overflow: clip kinda work but they obviously just cut off what's too much of the image and don't resize the image to fit.
You can set the content to "" and use background-image instead, and set the background-size to 1em.
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content:"";
background-image: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
background-size:1em;
display: inline-block;
}
<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
Lampe2020.de
</div>
This question already has an answer here:
How to do an inset border with a border radius on an image
(1 answer)
Closed 1 year ago.
I am trying to get a white border within the photo. Currently I have tried everything and come closest to the intended result with outline, only it is not possible to round it off.
Anyone have a solution for this?
It's about the fine white line, which would only need to be rounded off.
Code:
img {
outline: 1px solid white;
outline-offset: -10px;
}
Use a pseudo-element on top of your image.
img {
height: 75vh;
width: auto;
border-radius: 1rem;
display: block;
z-index: -1;
position: relative;
}
div {
display: inline-block;
margin: 1em;
position: relative;
}
div:after {
content: "";
position: absolute;
inset: 5px;
border: 2px solid white;
border-radius: 14px;
}
<div>
<img src="https://images.unsplash.com/photo-1625516838246-ff33acad73ec?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODAwMTMzNQ&ixlib=rb-1.2.1&q=85" alt="">
</div>
You can use two div blocks. External - as a container, with background image (or with img tag), and internal for line. It's a little bit verbose way, but very flexible
.external {
width: 100px;
height: 100px;
background-image: url('https://picsum.photos/536/354');
background-size: cover;
text-align: center;
position: relative;
border: 1px black solid;
border-radius: 15px;
}
.internal {
border-radius: 5px;
border: 1px red solid;
width: calc(90% - 2px);
height: calc(90% - 2px);
position: absolute;
top: 5%;
left: 5%;
}
<div class="external">
<div class="internal"></div>
</div>
In my project, I allow users to upload profile pictures. I want these pictures to have a circular border, like instagram profile pictures do. Does anybody know how to add this affect?
I have tried the border-radius property, however this makes some images with white/transparent backgrounds looking like they have been cropped, and doesn't have the expected outcome.
Does anybody know how to add a circular type border to any image that is upload by a user? Thank you.
HTML CODE:
.fixedImage {
position: relative;
left: 70px;
width: 25px;
top: 50px;
height: 25px;
border-radius: 50%;
}
Use a border and a box-shadow...
div {
text-align: center;
display: inline-block;
padding: 2em 3em;
border: 1px solid lightgrey;
background: lightgreen;
}
img {
display: block;
border-radius: 50%;
border: 5px solid transparent;
box-shadow: 0 0 0 5px red;
}
.white {
border-color: white;
}
<div>
Transparent border
<img src="http://www.fillmurray.com/g/150/150" alt="">
</div>
<div>
White border
<img src="http://www.fillmurray.com/g/150/150" alt="" class="white">
</div>
Instead of img, you can use div and have your image in background. This will allow you to add a background color of your choice to avoid the transparency.
Example:
<div class="fixedImage" style="background-image: url(img.png)"></div>
CSS:
.fixedImage {
position: relative;
top: 50px;
left: 70px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
background-size: 100px 100px;
}
I think https://medium.com/#biancapower/how-to-make-a-rectangle-image-a-circle-in-css-2f392bc9abd3 is what you are looking for.
A div around the image gets the border-radius: 50%
HTML:
<div class="image-cropper">
<img src="https://www4.lunapic.com/editor/premade/transparent.gif">
</div>
CSS:
img {
height: 200px;
width: 200px;
padding: 20px;
}
.image-cropper {
width: 240px; // it seems you need to add the padding twice here
border-radius: 50%;
border: 1px solid red;
position: relative;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/bdL8zmu1/
Without background color:
https://jsfiddle.net/94z27bdL/
Does anyone have any pointers on how I can achieve the following 2 effects (red color) using pure CSS?
I am not asking for entire code but if anybody can guide me in proper direction, that would really be great.
Thanks in advance.
For second effect you should create for image's container two pseudo-elements :before and :after with border-radius set to desired value. Element :before you should position to left bottom side of container and the element :after you should position to right bottom side. You should also specify widths for each pseudo-element (for example: 50% and 50%, 60% and 40% etc.).
Code for the second effect:
.image {
position: relative;
width: 350px;
}
img {
display: block;
padding: 0;
margin: 0;
}
.image:before {
content: '';
display: inline-block;
background: rgba(255, 0, 0, .5);
width: 30%;
height: 120px;
position: absolute;
bottom: 0;
left: 0;
border-top-right-radius: 15px;
}
.image:after {
content: '';
display: inline-block;
background: rgba(255, 0, 0, .5);
width: 70%;
height: 120px;
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 15px;
}
<div class="image">
<img src="http://placehold.it/350x350">
</div>
OK, here is a suggestion for the proper direction.
The lower red panel looks to me like two adjoining rectangles. You need to set the widths appropriately, and then for each rectangle round off one corner using border-radius: a b c d.
The effect looks to me like two of effect number 2. The red one, and then the same in white, possibly with a z-index to make sure that it (partly) covers the other one.
I trust you already know how to make the red translucent, either by using opacity or setting the colour using rgba.
I hope that helps.
You have to use the pseudo elements :after & :before to achieve the bulge in the otherwise straight div.
You may try something like this:
div {
height: 30px;
width: 200px;
background-color: red;
position: relative;
}
div:after {
content: '';
position: absolute;
left: 0;
right: 0;
width: 0px;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
margin: auto;
}
div:before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -8px;
width: 0px;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 10px solid red;
margin: auto;
}
<div></div>
Since you didn't provide a fiddle so use below solution as a guide. CSS will produces curved edges that you join together to produce desired results.
div.arrow-curved {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div.arrow-curved:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
For more reference for CSS shapes: https://css-tricks.com/examples/ShapesOfCSS/
How can I style a div to look like a comic-strip speech bubble in CSS?
Here's an image demonstrating what I mean:
Is there a way of doing this in pure CSS?
A quick example, you can tweak it to fit your needs .. and since I cannot post a fiddle without code:
HTML:
<div class="balloon">
O hai !
<span class="tip"></span>
</div>
CSS:
body { background: #000; }
.balloon {
width: 250px;
height: 75px;
padding: 50px;
background: #fff;
border-radius: 50px;
position: relative;
font-size: 34px;
text-align: center;
}
.balloon .tip {
width: 0;
height: 0;
position: absolute;
right: 70px;
bottom: -20px;
border: solid 10px;
border-color: #fff transparent transparent transparent;
}
http://jsfiddle.net/6rzDK/