标签: css3

我在找什么:

为角色的一个HALF设置样式的方法.(在这种情况下,一半字母是透明的)

我目前搜索和尝试的内容(没有运气):

• 造型半个字符/字母的方法
• 使用CSS或JavaScript设置角色的一部分
• 将CSS应用于角色的50%

以下是我想要获得的一个例子.

是否存在CSS或JavaScript解决方案,或者我将不得不求助于图像？我宁愿不去图像路线,因为这个文本最终会动态生成.

更新:

因为很多人都问过为什么我想要设计一半的角色,这就是原因.我的城市最近花了25万美元为自己定义一个新的"品牌".这个标志就是他们想出来的.许多人抱怨简单性和缺乏创造力,并继续这样做.我的目标是把这个网站想成一个笑话.输入'哈利法克斯'你会明白我的意思.

在CSS Tricks上有很多不同的CSS形状- CSS的形状,我特别对三角形感到困惑:

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

它是如何以及为什么有效？

我如何使用CSS3渐变为我background-color,然后应用一个background-image应用某种光透明纹理？

我正在尝试calc()在Sass样式表中使用该函数,但我遇到了一些问题.这是我的代码:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

如果我使用文字50px而不是我的body_padding变量,我会得到我想要的.但是,当我切换到变量时,这是输出:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

我怎样才能让Sass认识到它需要替换calc函数中的变量？

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

我正在使用Twitter Bootstrap 3,当我想垂直对齐时我遇到问题div,例如 - JSFiddle链接:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Bootstrap中的网格系统float: left不使用display:inline-block,因此该属性vertical-align不起作用.我尝试使用margin-top它来修复它,但我认为这对于响应式设计来说不是一个好的解决方案.

搜索~角色并不容易.我正在查看一些CSS并找到了这个

.check:checked ~ .content {
}

这是什么意思？

我正在尝试选择除了和之外input的所有元素.typeradiocheckbox

很多人已经表明你可以放入多个参数:not,但是使用type似乎无论如何都没有用到我试试.

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

有任何想法吗？

我在我的网页上使用HTML5元素.默认输入type="date"显示日期为YYYY-MM-DD.

问题是,是否可以将其格式更改为:DD-MM-YYYY？

设置我在容器margin: 0 5px上.item和margin: 0 -5px容器上使用的flexbox项目之间的最小距离.对我来说,这似乎是一个黑客,但我找不到更好的方法来做到这一点.

例

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>