I want to set a transparent border inside around an image by using CSS. I can't find any way to do this.
here is the link for my image with transparent inside border effects.
That's not an easy task, since images are replaced elements and have quite some restrictions (pseudo-elements not working, inset box-shadow not working,...).
You have several options (there are probably more, I just list two):
Solution 1:
Make your image the background-image of an ordinary div and apply a border - this border will automatically overlap the image. Btw., you can use background-clip and background-origin to alter that behaviour.
Problem:
You need to know the dimensions of the image, to adjust the size of the div accordingly.
Solution 2:
Wrap your image into another element, and declare a pseudo-element to which you apply the borders.
Important are the display:block on the img and position:relative on the wrapper element.
Example fiddle
Use box-shadow
This CSS box-shadow: inset 0 0 0px 8px rgba(255, 16, 16, 0.45);
You can do the thing amazingly he he Enjoy It
http://jsfiddle.net/Q8d6V/3/
I can offer use 4 border-blocks with position:absolute. You can change style of each border. For exaple add shadow for left and top border
Example fiddle
Related
I want to create a sort of badge-like box, used for team descriptions, but I can't seem to come up with any way of getting it done. I've got border-radius going for the top, but no idea how to lead up into the rest of it. This is my current code: https://jsfiddle.net/ubgbjbao/
(A little of my CSS):
.wpsm_team_2_member_wrapper{
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
This is somewhat I'm trying to achieve: https://i.maagic.pw/MagnifloriousDeityMash
If you want to go the easy route, create a png file that's just a white background with a drop shadow and/or border.
It will be minimally slower but better than having to try to create the file with SVG which you may have to use if you want it purely html/css.
Look at this post. You'll have to get creative with your drop shadow though.
'Inverted' border-radius possible?
You could also try to implement this using Masking with SVG.
https://www.html5rocks.com/en/tutorials/masking/adobe/
You can get a lot of mileage using absolute positioning of one element butted up to the edge of another. Here you can add a border radius (border-radius: 50% 50% 0px 0px;) and padding to the portrait to get that half-circle look.
The portrait you can pull upwards using a negative top value. The left is left: calc(50% - 95px); which means 50% of the containing width minus half it's own width and horizontal padding (150px/2 + 20px).
You'll have to make sure the containing element (.wpsm_team_2_member_wrapper) has position: relative. Add a top margin to .wpsm_team_2_member_wrapper_inner to move it down out of the way of the portrait.
Finally if you give the portrait a box shadow pointing up box-shadow: 0px -3px 5px 0px rgba(0,0,0,.2); you can kind of make it look like a continuous shadow.
Not sure if this is what you meant, but hopefully can get you going. Example here:
https://jsfiddle.net/ubgbjbao/2/
I've an image. Can I derive its background from CSS styling??
Following is the image. I want a similar background in my div.
PS: I can use it as background-image, but I dont want to. So, please dont suggest this solution.
The easiest way will be to use a gradient.
background:-webkit-linear-gradient(left, #743D90, #954792); /*for chrome&safari*/
background:-moz-linear-gradient(left, #743D90, #954792); /*for firefox*/
background:-o-linear-gradient(left, #743D90, #954792); /*for opera*/
background:-ms-linear-gradient(left, #743D90, #954792); /*for IE*/
background:linear-gradient(left, #743D90, #954792); /*standard*/
makes a gradient with the colors of your image. There are so many lines of CSS so it will work in nearly all browsers.
Example:
http://jsfiddle.net/6uMzc/4/
Hope this will work for you.
Absolutely it can be done.
Wrap the image tag inside a div.
<div class="bg">
<img src="xxx.jpg" alt="image">
</div>
Note the image must have transparent background(this should be made sure by image editing tools like photoshop)
Now style the div with background gradient and size as something below.
.bg{
height:100px;
width:200px;
background:-webkit-linear-gradient(left, red, green);
background:-moz-linear-gradient(left, red, green);
background:-o-linear-gradient(left, red, green);
background:-ms-linear-gradient(left, red, green);
background:linear-gradient(left, red, green);
}
If I understand you correctly, you want to create a background similar to that image with css. You have several options for doing this. For starters you can use this Gradient Generator to create gradients. They are relatively simple, I'm sure you can figure out the core concepts, the generator is primarily because the different css prefixes must be added for compatibility.
You said not to consider the lines, but I do think I should point you to this CSS triangle generator, incase you need it. Your image has the lower portion cut off at an angle, and the best way to do this is (IMHO) is to create a white triangle and put it over it.
If you need any help applying these concepts, feel free to ask.
Update: See: http://jsfiddle.net/6uMzc/6/
You need two seperate divs to create this effect. One div is the gradient, the other is the triangle that removes the lower corner. I'll explain what the different parts of the css do:
The background attributes are all defining the gradient for different browsers.
position:relative;
position:absolute;
left:0;
bottom:0;
These lines are postioning the divs. This can get quite complex, but it is incredibly useful for web developers, so you should probably do further research. I actually think the w3schools page on this is pretty good. Elements with relative, fixed, and absolute positions can be modified by the left, right, bottom, and top attributes, which can move them around in different directions. Elements with relative positioning are moved "relative to their normal position." Elements with absolute positioning are moved relative of the next containing element with a relative or absolute positioning, or the body. Since the containing div is positioned relative, the position:absolute moves the triangle relative to the gradient. Left:0 and bottom:0 put the element in the bottom left corner.
border-width: 50px 0 0 500px;
Change the first number to change height and the last one to change width. 500px is the width of the containing div, so this covers up the entire bottom of the containing div.
I am trying to make a simple (ribbon like) effect with box-shadow property , I have made it on the right side but on the left side the effect is not the same and I cant understand why!
Does somebody have any idea?
My code: JSFIDDLE.
do i have to change something here maybe ?
box-shadow: 10px 10px 100px rgba(0, 0, 0, 10);
Do you mean like this ?
Demo
(I can't see where this seems a ribbon :)
You need to promote the TD to an higher z-index (by using position: relative to make it works).
Also note that the second parameter in box-shadow should be equal to both the sides, it is the (vertical) y-axis.
And using <div>s for this kind of stuff is better, <table>s should be used for tabular data only.
There is what appears to be a 2px bottom padding on the image to the containing element. I am able to resolve this by removing the z-index. I need the z-index arrangement however to provide an inset box shadow on the image.
It can be seen here: http://jsfiddle.net/JkLAP/
just add .photo{display:block}
demo: http://jsfiddle.net/JkLAP/2/
Is box-shadow part of box? width of shadow will be included in total width of Block element?
According to box-shadow: shadow effect on elements in css3, no.
box-shadow applies to the outside of the box model unless you specify "inset".
No, width of shadow is not included in the total width of the element.
And even if you specify inset, then the shadow will be inside the element, and in no way can contribute to the total width.