I want to achieve the following layout with the help of css. I want to be able to selectively underline text and draw circle around text elements.
This has somewhat of a chalk effect. Any pointers would be useful.
Sample Image
You want to have this freehand drawing effect right?
with css you can only make exact shapes that are not as handmade.
this effect you can do in two ways:
-Use images as background in the case of the circle and as image (<img>) in the case of the underline
-Using canvas, is an extensive and complex subject but it is the best way to solve your problem if you think about good practices
An example of the first way:
<div class="wrapper-text">
<p>text circle</p>
</div>
.wrapper-text {
width: 100px //width and height a little bigger than p tag
height: 80px;
background-image: url('/path-image-circle.png');
background-repeat: no-repeat;
background-size: 100%;
}
you can also place an image tag inside the wrapper with position: absolute and format the width and height instead of using as background
Yor can wrap the wanted word in span and then make this effect using pseudo elements:
HTML:
<p>Some Text with <span class="underline">underline</span> and <span class="circle">circle</span></p>
CSS:
.underline, .circle {
position: relative;
}
.circle::after{
content: '';
display: block;
width: 30px;
height: 30px;
border: 1px solid green;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.underline::after{
content: '';
display: block;
width: 100%;
height: 2px;
background: green;
position: absolute;
bottom: 0;
left: 0;
}
DEMO:
https://codepen.io/eliortabeka/pen/RdxVNX
NOTE:
You can change the circle type the any freehand drawing image you wish
Related
I want to add rgba(0,0,0,0.25) on top of backgroundColor: "#0075FF" to make it darker. However is there any way to achieve it without using a mixed color value? Note: I also would like to avoid an approach that has an overlaid element on top of it.
You can use a this trick with linear gradients:
background: linear-gradient(#f005, #f005), linear-gradient(#0f05, #0f05);
In this way you are using two gradients with alpha. The trick is that the colours of gradients starts and ends with the same value.
You can do a pure CSS approach, although it sort of overlays a pseudo-element on top of the main element.
*Try hovering over the example.
.colored {
background: #0075FF;
width: 100px;
height: 100px;
position: relative;
}
.colored:hover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.25);
}
<div class="colored"></div>
You can always make a separate container, place the elements in it, then in css make the new container the same size as the one you want to place on the other. I used a low opacity so you can see through the top color, making it look purple when it isn't.
You gain adjust the size of the container and then use placement methods as you wish.
.main {
width: 200px;
height: 200px;
background: red;
}
.img {
background-color: blue;
width: 200px;
height: 200px;
z-index: 2;
opacity: .5;
}
<div class="main">
<div class="img"></div>
</div>
You can use a :before pseudo element.
<div className="container">
....content
</div>
.container {
position: relative;
background-color: #0075FF;
}
.container:before {
content:"";
display:block;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background-color: rgba(0,0,0,0.25);
}
I want to apply a background-color on an image to put a shadow on it.
Nothing very peculiar for now, I simply put background-color:rgba(23,23,23,0.88); in my CSS.
But on this image, I need to have an other div, who display the real image without the shadow on it and I don't know how I can do it.
I made a fiddle because it must not be very clear: https://jsfiddle.net/Haplo31/aguxfr67/
In this fiddle, I would need to have the blue div "content" displaying the part of the image below without the background-color of the bgContainer, like a window on the image. (I don't need the blue color at all, it's just to highlight the div for the example)
Is this possible?
Thanks a lot for your time and your help
You could be using the box-shadow property, which comes in pretty handy in situations like this. I modified your bg-container class and added a :before selector to apply the shadow.
Text can be inserted through the content css-attribute, you could also create another div-class, apply the same positioning properties and fuel your text into that.
.imgContainer {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoR1aeLhVEeg-rfmWln8uuNI7t0El3zNY8HHfKT1Qwd2oN8-GPQQ');
background-size: cover;
width: 300px;
height: 200px;
}
.bgContainer {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.bgContainer:before {
content: 'This is some sample text to demonstrate you can get content as well';
color: white;
padding: 5px;
width: 50%;
height: 50%;
position: absolute;
bottom: 25%;
right: 25%;
box-shadow: 0 0 0 300px black;
opacity: 0.88;
}
.content {
width: 100px;
height: 100px;
top: 100px;
background-color: blue;
}
<div class="imgContainer">
<div class="bgContainer">
<!--<div class="content">
</div>-->
</div>
</div>
Hope this image explains more, what I want
(The transparent part of the image should indicate it is bigger than the .content Div :-)
Is there an almost save way (preferably just CSS) to let a background image start at the center?
background-position: center top;
… would use the image's center, not the left corner.
I can't manipulate the image itself (using a transparent offset) nor use absolute values.
You won't be able to do this with a background image on the desired element without using absolute values. See this answer for an illustration of why. In a nutshell, background positioning with percentages and keyword values works much like a sliding puzzle, keeping the image strictly within the element's background positioning area. Only absolute values are exempt from this behavior.
You could cheat by making the image a background of a pseudo-element of the desired element instead, but this requires the desired element to be relatively positioned and act as a containing block for all absolutely positioned descendants, including the pseudo-element:
.content {
position: relative;
height: 200px;
border: 1px solid;
}
.content#one { width: 100px; }
.content#two { width: 200px; }
.content::before {
content: '';
position: absolute;
left: 50%;
width: 50%;
height: 100%;
background: url(http://placehold.it/150x150) no-repeat;
}
<div class="content" id="one"></div>
<div class="content" id="two"></div>
Can be done with pseudo elements
.cimg {
border: 1px solid black;
height: 400px;
position: relative;
}
.cimg::after {
content: "";
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: 50%;
background-image: url("http://www.youramazingplaces.com/wp-content/uploads/2014/06/sunset-5.jpg");
background-repeat: no-repeat;
background-size: 400px;
}
<div class="cimg">
</div>
For a new Wordpress template, I designed (in Photoshop) a round-ish header that overlaps the image beneath.
The Design:
My try:
Code:
Right now, I'm using a border radius, since I want to do it in CSS rather than cutting out an image (also for responsive reasons).
border-radius: 100% / 100%;
No matter how I change the values, the border won't become nicely rounded.
The website so far: http://voorbeeld.website/19/
Maybe I was a little too creative in Photoshop, but nothing is impossible! Right?
Use a pseudo element, in this case I used the :before
Make sure the .wrapper's elements also have a position, relative or absolute, or you need to set z-index: -1 to the :before
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
top: -200px;
left: -10%;
width: 120%;
height: 400px;
background: lightgray;
border-radius: 50%;
}
.content {
position: relative;
padding: 20px;
text-align: center;
}
<div class="wrapper">
<div class="content">
Put your content here
</div>
</div>
I need to make custom shape(see image attached) on Dreamweaver and found the code below for reference. I'm not sure which values to change in the reference code to achieve my custom shapes. I don't know which values to change: top, left, width, or height to suit my custom shape. My max width of the shape is 1832px. Max height of wave is 179px. Lesser wave height is 113px. Please help.
Reference:
http://jsfiddle.net/7fjSc/9/
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
<div id="wave"></div>
You can see from this link:
http://jsfiddle.net/7fjSc/1248/
#wave:before
and
#wave:after
refer to two elliptical circles that are positioned over a rectangle. The left ellipsis is the same color as the rectangle (#e0efe3) while the ellipsis to the right is the same color as the background (white). This is a common technique with CSS to make rounded objects. Your example places smaller circles over a large rectangle, but to achieve the shape you want, you will have to place larger circles over a smaller rectangle (this will give you the curved shape on the left side). To achieve elliptical circles, change the border-radius attribute. Manipulation of these attributes should allow you to obtain the shape you need. Good luck!