How to ensure that the css border goes inside the image - javascript

I have a some picture with border add with photoshop but these border are dirty.
I would overwrite these border without doing it with photoshop again (Can not use a script because almost every picture are too specifics), because my client gave me about 15000 pictures with this error..
Then, I though about css border.
So, how can I make the border around the image to fill the inside of it ?
Is it possible ? Have you a better idea ?
EDIT
List of ideas which don't work for my case:
css attribute : border-style: inset (thank you anyway Abdul Basit)
css attribute : clip
Thank you in advance.

you can give inset border
border-style: inset;
can add a width that covers approx of all borders
border-width: 5px;
or you can use image as a border for all.

You can use box-shadow with inset to simulate a border. However the box-shadow does not work directly on the image element, because it will render behind.
You can solve this by making an .image-wrapper class with a box-shadow on.
And to make this shadow render in front of your image you just need to set the z-index to -1.
* { box-sizing: border-box; }
.img-wrapper {
box-shadow: inset 0 0 0 20px red; // Fake border on the inside
display: block;
margin: 50px auto;
width: 90%;
}
.img-wrapper img {
display: block;
position: relative;
width: 100%;
z-index: -1; // Render the image behind the box-shadow
}
Demo

Related

I have a video background bootstrap page. How can I make a transparent overlay?

I prepared the fiddle: http://jsfiddle.net/Leytgm3L/30/ and as you can see I already successfully included the video as a background on the main section. Later on there's a green section with some text and a black square. And now - is it possible to cut off the green background inside of this png file and leave there the video from the background? Ideally it would have alignment absolute, so it would show exactly the same area that is on that place in the original video. I thought about surrounding it with class:
.transparent{
}
but I don't know if it is possible to cut off the center of this square. Basically I would like to have an effect like this:
http://imgur.com/sAUKRml
I used your fiddler and with did it with shadow-box filling the outside with green. Tell me if it suits your needs.
I added two new CSS properties with:
.transparent{
box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);
overflow:hidden;
}
#imgBox{
box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);
}
http://jsfiddle.net/Leytgm3L/31/
Regards
When ever I do this, I like to use the pseudo-selector ::before.
Basically, say your banner's name was .main-banner. Without touching your html, you can add a div before it with just css.
Your css would be something like this:
.main-banner:before{
content: "";
position: relative; /* position on top */
width: 100%; /*full width*/
height: 100%;
display: block;
z-index: 0;
top: 0;
left: 0;
background: rgba(25,29,34,0.35); /*your background color */
}
I haven't worked in bootstrap for a while so I forget the class name for a hero-image, but you get the idea.
Edit: updated your fiddle, you would need to use video-container2.
fiddle here.

jQuery SlideDown and Border - Strange jump

When I use jQuery's SlideDown feature on an element that has a border, I do have a problem with a strange jump.
Here's a fiddle to demonstrate what I mean: http://jsfiddle.net/Complexity/um9xj/
I've placed the duration on 700 just for testing purposes
$(element).slideDown({
duration: 700
}).parent().addClass("active");
When you click the new items button you see the behaviour that I mean.
I hope that there is a very simple solution to it.
Try this:
Demo
It looks like as this is being animated down, the margin-top is applied and it jumps down a pixel.
Edit - the left border issue looks to be because you're positioning the menucontents element left:-4px which puts it outside of the menu element. This isn't an issue until you do the slideDown() animation and it automatically sets menu to overflow:hidden a simple fix is to move the positioning to the parent element.
CSS:
.icon .menu {
box-shadow: 0 0 0 #888;
display: none;
left:0px;
top: 60px;
/* margin-top:-1px; */
}
.menucontents {
//other styles
/* left: -4px */
}
The jQuery slideUp and slideDown animations animate the height of the content box, the margin-top, margin-bottom, padding-top, and padding-bottom. Your margin-top: -1px was getting animated but can only be 1 or 0, which is why it was jumping halfway through. Getting rid of margin-top will fix this. If you would like to avoid changing your CSS, you can override the margin editing like this:
$(element).slideDown({
duration: 700,
progress: function(){$(element).css('marginTop', '-1px')}
}).parent().addClass("active");
The progress function is called each frame of the animation and will overwrite jQuery's changes to your margin
EDIT: I've tried experimenting with overwriting overflow, but for reasons I can't determine, it isn't rendering properly. I recommend a CSS edit for your second problem. Since you want to position the menu, just use the outer-most div to modify your positioning and let the inner divs only worry about content:
.icon .menu {
box-shadow: 0 0 0 #888;
display: none;
left: 0;
margin-top: -1px;
}
.menucontents {
padding: 1px;
padding-left: 2px;
z-index: 100;
background-color: white;
/* left: -4px; *
...

Jquery mobile 1.4.0 remove disc from custom icon

As a wrote in the subject I'm going crazy for remove the disc from the custom icon on my JQM APP.
I've tried some solution found on the web but nothing is working.
This is a demo where on the left I got my home custom icon with disc and on the right the native home icon without disc:
http://jsfiddle.net/5nBVa/
This is the code I use:
.ui-icon-myhome:after {
background-image: url("http://www.mywine.info/images/theme/home.png");
/* Make your icon fit */
background-size: 24px 24px;
background-color: transparent;
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
}
Anyone can show me the way to remove it?
Thanks
If I understand what you want, you just need to set the background-color of the link to transparent:
.ui-icon-myhome{
background-color: transparent !important;
}
Here is your updated FIDDLE
UPDATE: OP wants image to fill the circular button and be the same size as a standard icon button with disc.
The icon is actually on the anchor tag's :after. Making the background-size, the width and height the same size as the button will cause the image to take up the whole button space. Adjust the margin-top and margin-left to keep the image centered within the button:
.ui-icon-myhome:after {
background-image: url("http://www.mywine.info/images/theme/home.png");
/* Make your icon fit */
background-size: 32px 32px;
background-color: transparent;
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
width: 32px !important;
height: 32px !important;
margin-top: -15px !important;
margin-left: -15px !important;
}
Updated DEMO
Not sure what you're trying to do, but have you tried adding class="ui-nodisc-icon" ?
Check Removing the disc in the following page : http://demos.jquerymobile.com/1.4.0/icons/index.html

replacing with image with color to make my application faster

I have a div with background-image property attached to it
I wanted to replace the background image with css color
I added the background-color but don't know how to make the rounded corner and make it to occupy only half of the container
I am replacing with image with color to make my application faster
Can you tell me how to fix it?
Providing my code below. I am attaching the screenshot too
<span class="position-ind all-values">
<div class="color-ind">--outer container
<div class="all-values-light"/></div>--inner container
</div>
.gen-position-green-row .all-values .all-values-light{
/*background-image: url('../img/positionIndicator_glow.png');*/
background-color: white;
border: solid 1px;
/* the border will curve into a 'D' */
border-radius: 10px 40px 40px 10px;
}

Using Single Image for Hover Effect

I Had read somewhere on a webtutorial that we can use only a single Image for hover effects in css. For Eg. I Need to input only this image in CSS
So, When the Facebook Icon is not hover we see the dull grey icon, but when someone hovers over the icon, the blue icon is displayed and I need to use only one image file in the CSS for this purpose.
How Can we do that. Also, I would like to know what are these kind of images know as ?
They are called sprites
They allow you to use one image for multiple elements, that can look entirely different
Official Documentation
I made a quick example to do what you required here
<div></div>
div {
background: url('http://i45.tinypic.com/2jee9zo.png');
background-position: -10px -15px;
height: 70px;
width: 70px;
}
div:hover {
background-position: -10px 83px;
}
You can use a CSS sprite. This is a useful tool: http://es.spritegen.website-performance.org/
Further reading: http://www.w3schools.com/css/css_image_sprites.asp
edit: Its called a spirte (sorry added this, cause i forgot to awnser your first question how this was named)
You can do this by positioning your background image as in example from my work down below
This is CSS, btw
input#searchSubmit { height: 34px; width: 36px; background: url('../images/searchSubmit.png') no-repeat; margin: 8px 8px 0 4px; cursor: pointer; border: none; }
input#searchSubmit:hover { background-position: 0px -34px; }
As you see, as I hover over the searchSubmit , it will change the background position of the image, pasted on the button, showing instead of the black with red search icon, the red with white search icon.
site is here, so you can see it in action, all my action buttons are made this way btw.
click here for seeing this in action

Categories