小编The*_*ick的帖子
在CSS中创建径向菜单
如何创建一个看起来像这样的菜单......
我不想使用PSD图像.我更喜欢使用像FontAwesome这样的包中的图标,并在CSS中生成背景/ css.
可以在此处找到使用PSD生成工具提示的图像然后使用它的菜单的版本.
推荐指数
解决办法
查看次数
使用CSS和HTML5使用梯形创建导航按钮
我正在尝试使用4个按钮制作导航div,一个向左移动,一个向右移动,另一个向下移动,另一个用于向上移动.另外,中间需要一个OK按钮.
按钮需要是它们形成任何(尺寸未设置)矩形的位置,按钮内部是最右边,左边,顶部和底部的位置,每个按钮都是梯形,在中间留下一个正方形OK-按钮.
就像那样:
我所做的是,我使用css创建了一个梯形父级,其位置相对形状:
.trapezoid_parent {
position: relative;
}
和一个使用的梯形,这是绝对的.
.trapezoid {
position: absolute;
border-bottom: 50px solid #f98d12;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
width: 100%;
height: 0;
z-index: 2;
border-top: 1px solid #000000;
}
为了制作顶部的一个,我翻转正常的一个并将它放在顶部:
.trapezoid.top {
transform: rotate(180deg);
top: 0;
}
底部梯形只需位于底部:
.trapezoid.bottom {
bottom: 0;
}
接下来我们需要左键
.left_button {
height: 100%;
position: absolute;
width: 40%;
left:0;
z-index: 1;
border-right: 1px solid #000000;
}
一个是正确的
.right_button {
height: 100%;
position: absolute;
width: 40%;
right:0;
z-index: 1; …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
CSS中的波浪下划线
我可以创建一个波浪下划线: 
我只能得到一个坚实的边界:
.err {
border-bottom:1px solid red;
display: inline-block;
}<div>A boy whose name was Peter was <div class="err">woking</div> down the street</div>推荐指数
解决办法
查看次数
未歪斜的孩子没有对齐
注意:这个问题是关于输出的问题,而不是关于任何形状的创建.
我最近创建了一个形状:
.prog {
position: relative;
top: 20px;
width: 150px;
height: 120px;
background: green;
display: inline-block;
transform: skewY(20deg);
transform-origin: 0% 100%;
transition: 0.8s ease;
}
.prog:before {
content: "";
position: absolute;
left: 150px;
width: 150px;
height: 120px;
background: red;
transform: skewY(-40deg);
transform-origin: 0% 100%;
transition: 0.8s ease;
}<div class="prog "></div>在上面的片段中,绿色形状是.prog元素,并且是倾斜的.红色形状是:before第一个元素的伪元素.
我倾斜.prog(偏斜)到20度.现在,我需要:before-20deg.为此,我首先不得不疏忽它.然后将它进一步倾斜20度.
所以最终的skewY价值是-40deg.我应用了这个,并适当的transform-origins.
但问题是两个形状的顶点都没有对齐.他们应该,但他们不是.这是显示问题的图像:
黑色线条仅供参考.
现在更多!
我倾斜-20 -20而不是 …
推荐指数
解决办法
查看次数
CSS转换过渡无法正常工作(Chrome)
注意:此问题要求解释Chrome上的CSS转换输出.
描述
我用css
skew和rotate变换做了一个菱形.我
:hover为该元素添加了伪类并改变了它的倾斜角度.
预期的结果是,在悬停菱形时,菱形的角度会发生变化.
这是小提琴和 片段:
div {
height: 200px;
width: 200px;
position: relative;
top: 140px;
left: 120px;
-webkit-transform: rotate(-45deg) skew(10deg, 10deg);
-moz-transform: rotate(-45deg) skew(10deg, 10deg);
transform: rotate(-45deg) skew(10deg, 10deg);
background: red;
transition: 0.8s linear all;
}
div:hover {
-webkit-transform: rotate(-45deg) skew(-30deg, -30deg);
-moz-transform: rotate(-45deg) skew(-30deg, -30deg);
transform: rotate(-45deg) skew(-30deg, -30deg);
transition: 0.8s linear all;
}<div></div>问题
这在Firefox v35.0.1和IE v10上运行良好.见下面的输出:
但在Chrome 40.0.2214.115上,输出似乎有所不同.菱形的角度会发生变化,但不均匀.并且在变换属性的转换结束附近,菱形"逐步结束"到期望的输出,而不是过渡变换.
它既不与 …
推荐指数
解决办法
查看次数
如何在拼写错误的单词HTML下放置挥手
我有一个网页HTML和JS.
我需要在拼写错误的单词下添加红色波浪线.我得到了我的算法来检测那些单词,但我只需要知道如何在这些单词下放一个挥手.
推荐指数
解决办法
查看次数
复杂的CSS定位
我想用CSS实现这个定位:
但经过几天尝试后我获得的最好成绩是:
你能帮助我实现这个定位吗,考虑到:
- "try"图片中的红色注释(参见下面的JSFiddle)表明了一些主要的限制
- 定位应该适用于IE8 +,FF10 +,Chrome,Opera,Safari(使用CSSPie和selectivizr兼容IE8)
这是JSFiddle和代码:
HTML
<body>body (all divs may have some padding, some margin and some border. All divs adjust their height to their content.)
<div id="globalcontainer"><span class="important">#globalcontainer (fixed width, not really centered into body : see center)</span>
<div id="header">#header (100%)</div>
<div id="middle">#middle (100%)
<div id="left">
<span class="important">#left (on the left of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content > min-width. <br>
<br>
If left+right+center min-width > global container …推荐指数
解决办法
查看次数
使用CSS着色重叠Div形状
我是编码的新手,我试图让这些div的交叉部分变成不同的颜色.我最初的尝试是创建一个带边框规格的第三个div来模仿形状,但我不能让它完美匹配.下面是标记和样式,描述了我想要的红色正方形和蓝色圆圈重叠,重叠部分为紫色.
.box {
width: 200px;
height: 200px;
background: red;
position: relative;
top: 40px;
left: -35px;
}
.shape {
width: 250px;
height: 250px;
background: navy;
border-radius: 50%;
position: absolute;
left: 50px;
top: 50px;
}
#top-left {
width: 148px;
height: 147px;
background: purple;
position: absolute;
top: 1px;
left:2px;
border-top-left-radius: 118px;
}<div class="box">
<div class="shape">
<div id="top-left"></div>
</div>
</div>有没有更简单的方法来做到这一点,或者是一种让左上边框完美圆润的方法？
推荐指数
解决办法
查看次数
悬停不一致地处理动画元素
我正在用css围绕圆形路径旋转div,我想让它在悬停时改变颜色.
请参阅此处的演示:http://jsfiddle.net/gg7tnueu/1/
html,
body {
height: 100%;
margin: 0;
}
.planet {
border-radius: 50%;
border: 2px solid #1a1a1a;
position: absolute;
margin: auto;
/*top: 50%;*/
-webkit-animation: orbit 6s infinite linear;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
animation: orbit 6s infinite linear;
backface-visibility: hidden;
transform: translateZ(0);
}
.planet.code {
-webkit-transform-origin: 8.5vh 7.875vh;
transform-origin: 8.5vh 7.875vh;
}
.planet.code:hover {
background: red;
}
@-webkit-keyframes orbit {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes orbit {
0% {
transform: …推荐指数
解决办法
查看次数
向这个元素添加向外弯曲的边框:◝◟___◞◜
问题
我的导航栏看起来像这样:
HTML和CSS
nav {
width: 1040px;
}
nav ul {
display: block;
list-style-type: none;
height: 40px;
border-top: 3px solid #222;
}
nav ul li {
width: 130px;
display: inline-block;
line-height: 40px;
text-align: center;
font-size: 16px;
font-family: Vollkorn;
font-weight: 400;
}
nav ul li a {
display: block;
text-decoration: none;
color: #333;
}
nav ul li a:hover,
nav ul li a:focus {
color: #000;
box-shadow: 0px 0px 2px black;
border-radius: 10px;
border: 2px solid #222;
border-top: 0px;
transition: …推荐指数
解决办法
查看次数
如何制作动画404齿轮？
我想制作一个带有几个齿轮的404页面，这些齿轮需要旋转一秒钟左右，然后慢慢停止旋转，最后完全静止。在我看来，这是一个很好的效果，可以让我的访客知道出了问题（机器/齿轮停止工作）。
我想用纯 css 来实现这一点，但无法通过谷歌搜索找到如何做到这一点。我也不知道如何使用 jQuery 来做到这一点。欢迎任何建议，但我仍然更喜欢 css3。
推荐指数
解决办法
查看次数
标签 统计
css ×11
css3 ×7
css-shapes ×6
html ×6
html5 ×3
javascript ×2
css-position ×1
tooltip ×1
underline ×1