Tag: css3

带有Respond.js的Modernizr

我正在仔细评估利用Modernizr和Respond.js进行响应式devise的最佳方法，并为社区提出了一些问题。 首先，我的理解是，在将Modernizr与Respond.js捆绑在一起时，在IE8及以下版本中不需要其他编码或testing来支持媒体查询。 换句话说，当Respond.js与Modernizr捆绑在一起时，我只需要在源代码中加载Modernizr就可以使Respond.js处于活动状态。 正确？ 其次，你认为这是IE8及以下版本中支持媒体查询的最有效方法吗？ 从本质上讲，我将会包含比现在支持媒体查询的浏览器更大的Modernizr脚本。 如果对媒体查询的testing失败，分离这两个脚本并仅加载Respond.js会不会更高效？ 第三，如果我想分离这两个脚本，您认为如果需要，加载Respond.js的最佳方法是什么？ 一种select是使用IE特定的条件注释来加载响应。 另一种select是使用yepnope和Modernizr来testing媒体查询支持，并在需要时加载Respond。 哪一个会更有效和防错。 最后，如果我select分开这两个脚本，并使用Modernizr加载响应，如果需要我遇到了以下两种技术： <script> yepnope({ test : Modernizr.mq('(only all)'), nope : ['js/libs/respond.min.js'] }); </script> 要么 <script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js"><\/script>')</script> 我发现第二次崩溃的IE8，但必须只需要重写。 你会推荐哪种技术？ 感谢所有的帮助。

水平滑动滑块与jQuery和触摸设备的支持？

我需要制作一个像这样的产品滑块（请参阅红色区域）滑动滑块。 它应该在桌面，iPad和移动浏览器上工作。 你知道任何jQuery / jQuery的手机插件来实现这一目标。 我想要的效果几乎类似于这个http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html （但它不是触摸兼容的） 和苹果iPad应用“拖车”中的“Top 25”一样，

如何重置CSS3 * -transform：translate（…）？

我应该如何重置以前应用的CSS转换？ 说我有： div.someclass { -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate(0, -50%); -ms-transform: translate(0,- 50%); -o-transform: translate(0, -50%); transform: translate3d(0, -50%, 0); } 那么我如何清除所有转换/翻译？ 我应该使用： translate(0, 0); / translate3d(0, 0, 0); 或者 transform:auto; ？

用twitter-bootstrap里面的表单下拉菜单

我的TopBar中有一个Dropdown，使用Twitter Bootstrap CSS框架构build。 我有3个问题，我无法find任何解决scheme： 文本和密码input字段太大，我怎么调整它们？ 使下拉框变大也可以。 田地的标签太黑了，我怎么能把它们照亮一点？ 点击进入其中一个字段时，下拉菜单正在closures。 我必须重新打开它，然后我可以键入，直到在下一个字段中单击。 即使closures下拉菜单，也会保留这些值。 我怎样才能让它保持开放？ 以下是问题1和问题2的屏幕截图： 这里也是现在的TopBar的HTML。 <div class='topbar-wrapper'> <div class='topbar'> <div class='topbar-inner'> <div class='container'> <h3> <a href="/">Webworld</a> </h3> <ul class='nav'> <li>FILLER…</li> </ul> <ul class='nav secondary-nav'> <li class='dropdown' data-dropdown='dropdown'> <a href="#" class="dropdown-toggle">Login</a> <div class='dropdown-menu' id='signin-dropdown'> <form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div> <fieldset […]

垂直和水平居中在CSS中的文字圈（如iPhone通知徽章）

我正在寻找一种在CSS3中做一个跨浏览器iPhone类徽章的方式。 我显然喜欢用这个一个div，但替代解决scheme将罚款。 重要的因素是它需要在所有浏览器中水平和垂直居中。 关于这些通知的一个有趣的devise问题是它们不能有一个指定的宽度（高度是固定的） – 他们应该能够处理[在ASCII绘图]（1）和（1000），其中（1000）不是一个完美的圆形，而是看起来更像是一个胶囊。 编辑 ：其他约束（来自史蒂文）： 没有JavaScript 显示属性不会改变为表格单元格，这是有问题的支持状态

在整个DIV周围添加CSS盒子阴影

是否有可能在整个DIV周围有阴影？ -moz-box-shadow: 3px 3px 3px #ccc; -webkit-box-shadow: 3px 3px 3px #ccc; box-shadow: 3px 3px 3px #ccc; 我知道属性的顺序是： 水平偏移 垂直偏移 模糊半径 颜色 但是我想知道是否有可能让影子四处走动，而不是只在一个边缘或一边出现。

CSS元素大小调整

我发现这个： 变换后的宽度/高度 和其他几个，但没有什么不是我所期待的。 我想要的是将大小缩放到其大小的50％（当然，animation过渡很好），并且将页面布局重新调整为元素的新（可视）大小。 默认情况下发生的情况是，元素在布局结构中仍然保留原始大小，仅仅通过相关的转换进行绘制。 基本上我希望用户点击一个文本块（或其他内容），然后将该文本缩放为其大小的50％（或其他），并将其粘贴在下面的面板中以指示它已被选中。 移动之后，我不希望元素周围有50％的空白。 我尝试了重新设置高度/宽度，但是这导致元素自身进行了新的布局，然后将比例应用到新的布局，这完成后仍留有50％的空白空间。 我的mozilla具体（为简单起见）代码如下所示： <script type="text/javascript"> function zap(e) { var height = e.parentNode.offsetHeight/2 + 'px'; var width = e.parentNode.offsetWidth/2 + 'px'; e.parentNode.style.MozTransform='scale(0.0)'; e.parentNode.addEventListener( 'transitionend', function() { var selectionsArea = document.getElementById("selected"); selectionsArea.appendChild(e.parentNode); e.parentNode.style.MozTransform='scale(0.5,0.5)'; e.parentNode.style.display = 'inline-block'; e.parentNode.style.height = height; e.parentNode.style.width = width; }, true) } </script> 我真的希望我不必陷入负面的利润率或相对定位，以达到这个目的… … 编辑：由于写这个，我发现一个非常类似的问题，既没有评论或答案。 它略有不同，因为我不关心它是一个HTML5的具体解决scheme，我怀疑这个解决scheme要么不存在，要么在于CSS / […]

我可以用jQuery淡入背景图片（CSS：background-image）吗？

我有一个文本的div元素和背景图像，通过CSS属性background-image 。 是否有可能通过jQuery淡入背景图片？ HTML： <div>Text</div> CSS： div { background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg); border: 1px solid #666; height: 10em; } 编辑 我已经做了一个小例子来说明我的情况。 基本上，这configuration了一个初始的background-image和一个transition ，并改变了jQuery的background-image 。 在我的testing中，两个图像之间没有animation过渡。 EDIT2 我修改小提琴的作品！

使用HTML data-attribute来设置CSS background-image url

我打算为一个朋友build立一个自定义的照片库，我确切地知道我将如何生产HTML，但是我遇到了一个CSS的小问题。 （如果可能的话，我宁愿不要使页面样式依赖于jQuery） 我的问题问候： HTML中的Data-Attribute 在CSS中的Background-image 我为我的html缩略图使用这种格式： <div class="thumb" data-image-src="images/img.jpg"></div> 我假设CSS应该看起来像这样： .thumb { width:150px; height:150px; background-position:center center; overflow:hidden; border:1px solid black; background-image: attr(data-image-src);/*This is the question piece*/ } 我的目标是从我的HTML文件中的div.thumb中获取data-image-src ，并将其用于CSS文件中的每个div.thumb （s） background-image源文件。 这是一个Codepen笔为了得到我正在寻找的一个dynamic的例子： http://codepen.io/thestevekelzer/pen/rEDJv

如果我已经在使用Modernizr，那我还需要HTML5 Shiv吗？

1）如果我已经在使用Modernizr，那么我是否还需要HTML5 Shiv来支持IE5的HTML5标签？ 2）HTML5 Shiv仅适用于IE，还是适用于所有没有原生HTML 5支持的浏览器？ 像旧版本的Firefox，Safari，Chrome等？