In webkit if I set border radius on an image that has a border, the image won't sit nicely within the border but overlay the border and remains square.
http://jsfiddle.net/ECNJ4/
Any fixes that don't mean using a background image instead or adding markup?
check out: http://jsfiddle.net/ECNJ4/6/
CSS
img {
border-radius: 15px;
box-shadow: 0 0 0 16px red;
}
I had to use a wrapper element around the img to make it work. Maybe there's a better solution, but I didn't find it.
Related
I want to create this type of animation in textbox in materialize css. Checked many codepen an websites but can't find anything which helps with materialize css. Sometime two border display or sometime no effect.
Anyone provide some sourcecode of css so i can implement it. I don't want to include other css library. Only with materialize css and little bit css.
.input-field input[type=text]:focus {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
I think customizing this after or before presudo will work.
Created Pen Here :
https://codepen.io/naitik_kundalia/pen/bRNeaz
I had created sliding border but it also work in reverse. Textbox removed on focus after animation end.
Check this Pen:
$(".mat-input").focus(function(){
$(this).parent().addClass("is-active is-completed");
});
$(".mat-input").focusout(function(){
if($(this).val() === "")
$(this).parent().removeClass("is-completed");
$(this).parent().removeClass("is-active");
});
https://codepen.io/legeoffrey/pen/VYMLNq
Hope this will help you
I have a shape in easeljs. When it is initially created it has a backgroundcolor set to white. Then, at some point later down the line, I need to give this rectangle shape a background image - I really can't get it to work.
I would like the background image of the shape to be positioned like this:
background-image: url(images/background.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
Anyone who can tell me how to approach this. Thanks :)
If you want to use a background image with EaselJS, you can't use CSS.
You can instead use the bitmapFill with EaselJS graphics, which does a pattern fill using an image.
var img = document.createElement("img");
img.src = "path/to/image";
var shape = new createjs.Shape();
shape.graphics.beginBitmapFill(img, "optionalRepeat", optionalMatrix);
shape.graphics.drawRect(0,0,100,100);
Here is a quick fiddle showing it in action: http://jsfiddle.net/lannymcnie/ogy1qmxn/2/
Cheers,
I'm building a Magento shop for a client, I uploaded some test images for the products but they seem to have a black background whenever I mouse over using chrome. Does anyone understand why? I don't see any problems with css so it has to be the images themselves.
URL: (I'm talking about those images below 'New products' and 'featured')
http://bit.ly/zuRH2O
I made those using photoshop and the png-24 save-for-web option (http://bit.ly/zGXTAo). Been doing that for years and this is actually the first time happening.
The problem is in your css. Look at the background image:
a.product-image {
margin-bottom: 10px;
width: 182px;
height: 239px;
border: 1px solid #2F3238;
background: url("/images/thumb_bg.png") 50% top no-repeat;
display: block;
border-image: initial;
If you right click on the images, and view in new tab you will see that they are transparent. Your background is dark, so the image picks that up.
I'm creating a card-flip effect using webkit transformations. I have it working as I like in one section, where I have a DIV that rotates around its center axis giving the look of a card that is flipping over.
I now want to add this same effect to a page transition. I'm using the same CSS and HTML structure, but in this case I'm not getting an effect that rotates around a center axis.
Instead, it looks like the transformation is rotating along the y axis anchored to the left of the object rather than the center (so it looks like a door opening, rather than a card flipping).
I've been reading through the spec's but can't figure out which property controls the rotation axis' position. What do I need to add or change with this to get the flip working?
html structure:
<div id="frontbackwrapper">
<div id="front"></div>
<div id="back"></div>
</div>
and the css (.flip is being added via jQuery to start the effect)
#frontbackwrapper {
position: absolute;
-webkit-perspective: 1000;
-webkit-transition-duration: 1s;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
#frontbackwrapper.flip {
-webkit-transform: rotateY(180deg);
}
#frontbackwrapper.flip #front,
#frontbackwrapper.flip #back {
-webkit-transform: rotateY(180deg);
-webkit-transition: 1s;
}
#front, #back {
position: absolute;
-webkit-backface-visibility: hidden;
}
#back {
-webkit-transform: rotateY(180deg);
}
Try this on your wrapper
-webkit-transform-origin: 50% 0 0;
Though you may or may not have to have its width explicitly set.
The possible outline styles that I know of are shown below.
dotted
dashed
solid
double
groove
ridge
inset
outset
None of these puts an outline around an input element like shown below:
With what CSS stylling can someone style an input element like shown above?
it looks like a browser default behavior, but you can fake it with css3 box-shadow
http://jsfiddle.net/meo/BndwU/
or with your colours:
http://jsfiddle.net/meo/BndwU/1/
or with bonus focus animation:
http://jsfiddle.net/meo/BndwU/2/
This will only work in modern browsers that accept CSS3 properties like box-shadow:
input[type="text"] {
background:white;
border:1px solid #ffcc00;
box-shadow:0 0 3px #ffcc00;
-moz-box-shadow:0 0 3px #ffcc00;
-webkit-box-shadow:0 0 3px #ffcc00;
}
See example →
Using the new CSS 3 box-shadow you can put a gradient border around an input box. First wrap it in a span with a new class that contains something like:
.coolio {
box-shadow:rgba(0,0,0,0.5) 0px 0px 24px;
}
Here is a working example: Gradient Shadow Outline Demo