Tag: css3

旋转或旋转hover的图像

我想知道如何在旋转或旋转图像时进行旋转 。 我想知道如何在下面的代码中用CSS来模拟这个function: img { border-radius: 50%; } <img src="http://i.imgur.com/3DWAbmN.jpg" />

如何在CSS中设置min-font-size

我想为我的HTML页面中的每个元素设置最小字体大小。 例如,如果有字体大小小于12px的元素,则它们将变为12px。 但是,如果有字体大小grater然后12px的元素,他们不会改变。 有没有办法用CSS做到这一点?

flexbox将列左右alignment

学习如何使用flexbox,通过使用典型的css,我可以将两列中的一列左移,而另一列右移一列之间的空格。 我将如何做到这一点与flexbox? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px #000; } #b { width: 20%; border: solid 1px #000; height: 200px; } <div id="container"> <div id="a"> a </div> <div id="b"> b </div> </div>

CSS3转换 – 淡出效果

我正在尝试在纯CSS中实现“淡出”效果。 我在网上查了一些解决scheme,这里是小提琴 。 不过在线阅读文档之后 我想弄清楚为什么幻灯片animation不起作用。 任何指针? 这是HTML <div class="dummy-wrap"> <div class="success-wrap successfully-saved">Saved</div> </div> CSS .dummy-wrap { animation: slideup 2s; -moz-animation: slideup 2s; -webkit-animation: slideup 2s; -o-animation: slideup 2s; } .success-wrap { width: 75px; min-height: 20px; clear: both; margin-top: 10px; } .successfully-saved { color: #FFFFFF; font-size: 20px; padding: 15px 40px; margin-bottom: 20px; text-align: center; -webkit-border-radius: 5px; […]

高级CSS技巧:如何跨越CSS3网站布局中的多个列的图像?

鉴于 :一个基本的四列布局,一个简单的连续的文本段落 ,以及只有一张照片跨越三列,右上alignment。 现在,我们如何在html / css3 / js的最后三列中优雅地展示我们的图像,以便我们的文本自动在图像周围stream动? 。 。 .quatroColumns{} /* css multi column 4 columns */ .imageSpanning2Columns{} /* align to top-right */ .imageSpanning3Columns{} /* align to top-right */ .imageDescription{} /* description box over image */ http://jsfiddle.net/Vbr9d/205/ ( find图像应该去的地方的一个痛苦:不简单&不优雅的开始! ) http://jsfiddle.net/Vbr9d/206/ ( 看起来丑陋,但HTML开始优雅的图像和文字分离! ) 忘记旧的浏览器版本,除了目前主要的浏览器版本FireFox InternetExplorer Chrome Safari。 任何想法,方向或实验都是受欢迎的。 可选的JavaScript试用版将段落文本自动分成不同的div,但也只有在某种程度上,如果你确信CSS将不会成为这种基本布局,直到2050年。

如果没有JavaScript,当长一个不合适时,我可以显示不同的文字吗?

我正在尝试做什么 我有一个大小有限的框,应该包含一些文本: .box { width: 100px; height: 40px; background-color: yellow; } <div class="box"> Some text goes here. </div> 但是,如果文本太长而无法放入文本框中,我想用我预先准备的另一个更短的文本replace文本。 例如,如果我想用这两个名字填充两个框: Short version Long version ———————————————————— Rudolf E. Raspe Rudolf Erich Raspe Baron Munchausen Hieronymus Karl Friedrich von Munchhausen 那么第一个盒子里面会包含“鲁道夫·埃里克·拉斯佩”(Rudolf Erich Raspe),因为里面的尺寸足够短,而第二个盒子里会包含“男爵男爵”(Baron Munchausen),因为男爵的全名太长了。 我怎样才能build立这样一个盒子,只使用HTML5和CSS3? 浏览器的兼容性很重要,但是我并不需要适应11之前的旧版本或Internet Explorer。 备择scheme 我可以select任何标准选项来处理太长的文本 – 让它溢出,或通过overflow: hidden ,或添加滚动条,或添加省略号,或任何其他标准解决scheme。 但是因为我已经有了每个可能的文本的短版本,所以我想用这些。 例如,我可以通过使用包装器并将其大小与盒子的大小进行比较来在JavaScript中执行此操作。 但是如果可能的话,我想要一个非JavaScript的解决scheme。 我试过了 […]

属性select器的值等于A还是B?

我想知道是否可以在CSS中指定一个属性等于两个值之一的元素,如下所示: input[type=text][type=password] 然而,这个select器似乎并没有工作(我假设因为指定两次相同的属性是无效的),有没有人知道如何做到这一点? 谢谢,Alex。

在什么情况下Flex-shrink应用于柔性元素,它是如何工作的?

我已经玩过这个漂亮的CSS Flex的演示页面 ,我理解了大部分的概念,但是我无法看到flex-shrink在工作中。 无论我在那里应用什么设置,我都看不到页面上的差异。 从规格 : <“柔性成长”> 此组件设置“flex-grow”longhand,并指定flex增长因子,该因子决定了在分配正空闲空间时flex项目相对于flex容器中其余Flex项目将增长的程度。 省略时,设为“1”。 <“柔性缩水”> 此组件设置“flex-shrink”longhand并指定柔性收缩因子,该因子决定在分配负空闲空间时,Flex项目相对于Flex容器中其余Flex项目收缩的程度。 省略时,设为“1”。 柔性收缩因子在分配负空间时乘以柔性基础。 在什么情况下应用flex-shrink (即负空间分布时)? 我已经尝试过在flexbox元素上设置宽度的自定义页面,并且在里面的元素的宽度(min-)使溢出,但它似乎不是描述的情况。 它已经被支持了吗? 作为解决scheme,链接的演示中的一组选项或者JSFiddle-like现场演示将非常感谢。

什么是弹性基础属性设置?

将max-width或width设置为弹性项目而不是flex-basis有什么区别? 它是flex-grow/shrink属性的“突破点”吗? 而当我设置flex-wrap: wrap行浏览器如何决定在哪一点下移项目到新行? 是根据它们的宽度还是“弹性基础”? 例如: http : //jsfiddle.net/wP5UP/最后两个框有相同的flex-basis: 200px ,但是当窗口在300px和400px之间时, 只有其中一个向下移动。 为什么?

嵌套伪元素内的伪元素

我有一个:开幕前的“报价”和之后的一个结束报价。 现在我想要的是:之后:“引用”参考后,但我不能得到它的工作。 有谁知道这是可能的吗? 我的代码到目前为止: – blockquote:before { content: '\201C'; } blockquote:after { content: '\201D'; } blockquote { font-size: 22px; line-height: 24px; text-indent:60px; } blockquote:before { font-size: 170px; margin-left: -136px; margin-top: 50px; opacity: 0.2; position: absolute; overflow:visible; float:left; width:135px; } blockquote:after { float: right; font-size: 170px; margin-right: 35px; margin-top: 33px; opacity: 0.2; overflow:visible; width:135px; } blockquote[cite]:after:after […]