css3

Is it possible to draw a partial circle outline in CSS (open ring shape)?

China☆狼群 提交于 2019-12-28 12:01:21
问题 I'm interested in creating a loading spinner entirely in CSS but in order to do so I would need to be able to draw a open ring shape like this: The ring would draw itself around the circumference of the circle. Is this achievable in CSS? 回答1: To create a circle that gradually draws it's outer path, use SVG. SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself. Then use a CSS

Is it possible to draw a partial circle outline in CSS (open ring shape)?

孤者浪人 提交于 2019-12-28 12:01:07
问题 I'm interested in creating a loading spinner entirely in CSS but in order to do so I would need to be able to draw a open ring shape like this: The ring would draw itself around the circumference of the circle. Is this achievable in CSS? 回答1: To create a circle that gradually draws it's outer path, use SVG. SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself. Then use a CSS

Firefox SVG graphics blurry

[亡魂溺海] 提交于 2019-12-28 12:00:46
问题 I have a responsive web design with a SVG logo/image which is dynamic with its container. All major browsers seem to support SVG really good. My SVG is dynamic, so if I scale up my browser window, the SVG does it too. In Chrome and IE9 it works like a charm. In Firefox the SVG is blurry at some sizes. But I can't say its all the time blurry when it's over the initial SVG size. It just seems not to rerender correctly all the time while I'm scaling up my browser window. That's what it looks

CSS Border on PNG image with transparent parts

假装没事ソ 提交于 2019-12-28 12:00:23
问题 Im trying to add a border on a PNG image I have (Example included). The thing is that when I add the border currently it adds it on a box shape around all the image and not on the exact vector (Meaning it includes the transparent parts in the image). Is there any possible way to setup the configuration of the border that it won't consider the transparent area's. (Even if not in CSS... Maybe HTML5/JS?) 回答1: As of now ( January 31st 2015 ) there is a way to do that without using canvas, with

CSS Border on PNG image with transparent parts

╄→гoц情女王★ 提交于 2019-12-28 12:00:13
问题 Im trying to add a border on a PNG image I have (Example included). The thing is that when I add the border currently it adds it on a box shape around all the image and not on the exact vector (Meaning it includes the transparent parts in the image). Is there any possible way to setup the configuration of the border that it won't consider the transparent area's. (Even if not in CSS... Maybe HTML5/JS?) 回答1: As of now ( January 31st 2015 ) there is a way to do that without using canvas, with

Table columns, setting both min and max width with css

喜欢而已 提交于 2019-12-28 11:49:14
问题 I would like to have a table which in the columns can stretch but I'm having a little trouble with min and max width in css. It also seems that theres some conflicting answers around how this works: min/max width should work: Prevent text from overlap table td width min/max width are unsupported: Min-width and max-height for table attributes I would like to have the following table{ width:100%; } .a, .b, .c { background-color: red; } .a { min-width: 10px; max-width: 20px; } .b { min-width:

adding @font-face to CKEditor

寵の児 提交于 2019-12-28 10:39:05
问题 I would like to add a font to the CKEditor font combo box. This in itself is easy enough. However the font I would like to add is a custom font that I use with the @font-face CSS3 attribute. I managed to do that but the editor itself does not show the custom font. If I just take the html created by CKEditor and show it in a div on the page, the custom font show nicely. I would also like to somehow add the @font-face attribute to the text area of CKEditor, so my users can see the custom font

Stretch child div height to fill parent that has dynamic height

为君一笑 提交于 2019-12-28 08:11:33
问题 As it can be seen in the following fiddle, I have two div s, contained in a parent div that have stretched to contain the big div, my goal is to make those child div s equal in height. http://fiddle.jshell.net/y9bM4/ 回答1: The solution is to use display: table-cell to bring those elements inline instead of using display: inline-block or float: left . div#container { padding: 20px; background: #F1F1F1 } .content { width: 150px; background: #ddd; padding: 10px; display: table-cell; vertical

Is it possible to emulate orientation in a browser?

試著忘記壹切 提交于 2019-12-28 08:01:09
问题 As the title is it possible to emulate orientation in google chrome or firefox? Meaning somehow change the browser to support media query (orientation = (landscape or portrait)) I have a emulator for mobile, but I would like to have the developer tools from chrome or firebug. Update Chrome v25 specific... To anyone, in Google Chrome Dev Tool > Overrides > Override Device Orientation you can change the alpha , beta and gamma . I think this is a place to start of from, but I have no idea how

Very difficult to solve and strange CSS3 opacity transition issue (…must be a bug?)

我的梦境 提交于 2019-12-28 07:58:58
问题 I am absolutely tearing all of my hair out with this highly frustrating and strange CSS problem I am having. I am using the Bones boilerplate to make a website, and it has been great, until now... It uses fluid grid system and I have recently tried to create a simple gallery which I have made into a grid (4 images, each one wrapped in a quarter column, with first/last classes added to the first/last images). If you hover over the images (especially noticeable on the first three for some