css3

问题 I'm trying to get a blur effect on my photogallery if the user is not registered. I got it, but only for chrome. In my Firefox 14.0.1 (linux) I'm not able to get it working My html template (I develop under django) <h2> Gallerie</h2> <ul class="galeria" id="imagenes"> {% for image in gallery %} {% if user.is_authenticated %} <a rel="prettyPhoto[gallery]" href="{{image.url}}"> <img width="120px" height="120px" alt="{{image.comment}}" src="{{image.url}}"/> </a> {% else %} <img class="blur" alt=

问题 I've set some CSS custom properties in my stylesheet: :root { --bc: #fff; --bc-primary: #eee; --bc-secondary: #ddd; } I can retrieve them individually if I already know the name of the CSS variable like so: console.log(getComputedStyle(document.body).getPropertyValue('--bc')); // #fff But if I wanted to pull a list of CSS variables and their values out, how would that be done? 回答1: One possible solution would be to parse the document.styleSheets , and then split the rules into properties

问题 So, I'm in the process of building a website designer and I have come across something strange, if you set the text-shadow: 0 0 0 someColor on a element the shadow is actually applied, I have made a fiddle where this is very clear here FIDDLE . Is this a bug? 回答1: It's not a bug in that it's not an incorrect implementation of the spec; the spec implies that a shadow is generated as long as the computed value is something other than none . The only values that can compute to none are none or

问题 The following code renders well in IE9, FireFox, Chrome, but not in Safari: .search-choice { position: relative; background-clip : padding-box; background-image: url('../Design/icon_chosen_close.gif'); background-repeat: no-repeat; background-position: top 6px right 6px; } <ul class="chzn-choices"> <li class="search-choice" id="selLVB_chzn_c_0"> <span>multi1</span><a href=# class="search-choice-close" rel="0"></a> </li> </ul> Safari doesn't seem to take into account the background-position. I

问题 Preface Let's pretend that a div is animated from opacity:0; to opacity:1; and i want to keep opacity:1; after the animation ends. That's what animation-fill-mode:forwards; does. @keyframes myAnimation { from { opacity:0; } to { opacity:1; } } div { opacity:0; animation-name:myAnimation; animation-delay:1s; animation-duration:2s; animation-fill-mode:forwards; }​ <div>just a test</div>​ Run it on jsFiddle Note 1: i didn't include the vendor prefixes here to simplify Note 2: that's just an

问题 Hello everyone I am trying to do something like this I need it for buttons so far I tried it using SVG and buttons something like this <div style="position:relative;"> <div style="border-radius:50px;background-color:#F3B200;border:2px solid;width:35px;height:35px;position:absolute;left:84%;margin-top:-18px;"> <center>5</center> </div> <div> <button class="btn btn-success btn-lg" style="width:170px;"> <center> MYbutton</center> </button> </div> </div> But this does not work in a proper way. I

问题 Hello everyone I am trying to do something like this I need it for buttons so far I tried it using SVG and buttons something like this <div style="position:relative;"> <div style="border-radius:50px;background-color:#F3B200;border:2px solid;width:35px;height:35px;position:absolute;left:84%;margin-top:-18px;"> <center>5</center> </div> <div> <button class="btn btn-success btn-lg" style="width:170px;"> <center> MYbutton</center> </button> </div> </div> But this does not work in a proper way. I

问题 I'm not sure how to use using jQuery, but has a CSS3 property: transform: rotate it could be used along with jQuery? transform:rotate; -ms-transform:rotate; -webkit-transform:rotate; JSFIDDLE 回答1: Try this fiddle: http://jsfiddle.net/kDSqB/ It's not 100% accurate in working out full rotation, but I think that night be the fiddle environment. The code here: var $cog = $('#cog'), $body = $(document.body), bodyHeight = $body.height(); $(window).scroll(function () { $cog.css({ 'transform':

问题 this is my first question soo... i have to do someting like this: but i search a lot and nothing work for me, i had something like this in my html and css .thumbnail { position: relative; margin-bottom: 0; border: 0; border-color: transparent; } .caption { position: absolute; top: 40%; left: 0; width: 100%; } <div id="box-search"> <div class="thumbnail text-center"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt=""> <div

问题 Backstory: Goal: create a triangular shadow that can be applied via CSS and is scale-independant (i.e. a vector, not a raster image) After much research (tho I'm certainly open to alternatives) I chose to use an SVG background image as a data uri (to avoid the extra HTTP request). I know that this can work: http://jsfiddle.net/6WAtQ/ Where I'm stuck: I created a simple svg triangle, with a Gaussian blur effect, if it's written directly in the HTML (as opposed to the CSS) the svg works