我目前正在设计一种CSS'mega dropdown'菜单 - 基本上是一个普通的CSS-only下拉菜单,但包含不同类型的内容.
目前,似乎CSS3过渡不适用于"display"属性,即你不能做任何类型的过渡display: none
到display: block
(或任意组合).
当有人将鼠标悬停在其中一个顶级菜单项上时,是否有人会想到上述示例中的第二层菜单可以"淡入"?
我知道你可以在visibility:
属性上使用转换,但我想不出有效利用它的方法.
我也尝试过使用身高,但这只是失败了.
我也知道使用JavaScript实现这一点是微不足道的,但是我想挑战自己只使用CSS而且我认为我有点短.
所有和任何建议最受欢迎.
我正在努力绕过CSS3 Gradients(特别是径向的),并且这样做我想我已经为自己设置了一个相对艰难的挑战.
在Adobe Illustrator中,我创建了以下"按钮"样式.
为了创建这个图像,我创建了一个背景颜色为rgb(63,64,63)
或的矩形#3F403F
,然后"风格化"它的边界半径为15px.
然后我使用了25%不透明度,8px模糊,从中心白色的"内部发光".最后,我在它上面应用了3pt白色笔画.(如果您想要复制它,我告诉您所有这些,如果上面的图像不够用.)
所以,我的问题是:
是否可以使用CSS重新创建这个"按钮"而无需图像?
我知道Internet Explorer的"局限性"(为了这个实验,我不能给猴子们).我也知道webkit中的小'bug',它错误地渲染了一个背景颜色,边框半径和边框(背景颜色与颜色不同)的元素 - 它让背景颜色在弯曲处渗透角落.
到目前为止,我最好的尝试是相当可悲的,但这里的参考是代码:
section#featured footer p a
{
color: rgb(255,255,255);
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
text-decoration: none;
padding: 5px 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid rgb(255,255,255);
background: rgb(98,99,100);
background: -moz-radial-gradient(
50% 50%,
farthest-side,
#626364,
#545454
);
background: -webkit-gradient(
radial,
50% 50%,
1px,
50% 50%,
5px,
from(rgb(98,99,100)),
to(rgb(84,84,84))
);
}
Run Code Online (Sandbox Code Playgroud)
基本上,太可怕了.感激地接受任何提示或提示,并提前感谢他们!
我正在为PHP应用程序构建一个dockerised测试'平台' - 特别是(暂时)用于WordPress.我正在使用PHPFarm在不同的端口上提供不同版本的PHP.在前面使用nginx,我已经有很多工作了.(https://github.com/richardtape/testit是主要的回购)
我现在面临的一个重大问题是让WordPress的"非常固定的"工作.在标准的nginx设置中,它只是一个类似的例子
location / {
index index.php index.html index.htm;
try_files $uri $uri/ /index.php?$args;
}
Run Code Online (Sandbox Code Playgroud)
但是为了能够从主机获得不错的URL,并且为了拥有一个代码库,我使用了以下几行:
server {
listen 80;
index index.php index.html index.htm;
server_name 52.spaces.dev;
location / {
proxy_pass http://phpfarm_52;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
root /var/www;
}
upstream phpfarm_52{
server phpfarm:8052;
}
Run Code Online (Sandbox Code Playgroud)
现在,这是有效的.(对于PHP 5.3,5.4,5.5,5.6和7,还有5个类似的规则)主页加载来自主机的每个不同的server_names(如果你在每个上输出PHP版本,你可以看到你得到一个不同的PHP版本).
然而,第二个我切换到'内部'网址(或任何非根,即http://52.spaces.dev/about/),我得到一个404.我尝试过类似的东西
location / {
try_files $uri $uri/ /index.php?$args
}
location ~ \.php$ {
proxy_pass http://phpfarm_52;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
Run Code Online (Sandbox Code Playgroud)
我得到一个重定向循环,取决于我尝试过的几种不同的方式,或者只是一系列301重定向,页面永远不会加载或错误,如
nginx_1 | 2016/04/08 20:31:29 …
Run Code Online (Sandbox Code Playgroud) 在关于CSS3渐变的第一个问题之后,我正在重新创造一个"内在的光芒",我现在已经到了我对webkit渲染效果的方式不太满意的地步.
基本上,如果你给一个元素一个背景颜色并对它应用一个边框半径,webkit会让背景颜色"流血"以填充周围的框(使它看起来有点糟糕)
要重现不良影响,请尝试以下操作
section#featured footer p a
{
color: rgb(255,255,255);
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
text-decoration: none;
padding: 5px 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: rgb(98,99,100);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}
Run Code Online (Sandbox Code Playgroud)
显然这似乎只是一个Windows问题,所以对于Mac上的人来说,这是一个截图:(查看'继续阅读'按钮) Ugly Button http://iamfriendly.clients.friendlygp.com/files/2010/ 04/download.png
你会注意到在Safari/Chrome中(据我所知,最新的公共下载以及最新的夜莺),你会得到一个相当难看的背景色流血.但是,在Firefox中,您应该能够看到我所追求的内容.如果您使用的是Internet Explorer,那可能会让您失望.
有谁知道一种技术可以让我产生'正确'的效果?是否有一个我错过的CSS属性告诉webkit仅在包含框的border-radius'd部分内有背景.
我可以使用图像,但我真的想避免它.当然,当我们处理CSS3并且景观不断变化时,我可能只需要"混乱"它并恢复为图像.
但是,如果有人能提出替代方案,我将非常感激!
我是卡皮斯特拉诺(第3.2.1节)的绝对新手,所以请原谅我,错误,无用.我正在部署一个PHP应用程序并希望在deploy:symlink:release任务之前运行composer install(仅在不运行回滚时)
我无法访问新创建的发布目录,因为我需要它才能进入它并运行composer(并运行其他一些项目).我现在有;
namespace :deploy do
namespace :symlink do
desc 'Run composer'
task :runcomposer do
on roles :all do
execute "cd '#{current_release}' && composer install"
execute "cd '#{current_release}' && ln -s /sites/shared/index.php index.php"
end
end
before :release, :runcomposer
end
end
Run Code Online (Sandbox Code Playgroud)
{current_release}变量此时似乎不存在(这很奇怪,因为运行git pull的目录肯定是在/ releases /目录中创建的(带有适当的时间戳)但是我得到'未定义的局部变量或方法"current_release"'
有没有办法在'当前'符号链接指向它之前确定这个新版本目录?非常感谢你提前.
css ×3
capistrano ×1
capistrano3 ×1
css3 ×1
deployment ×1
gradient ×1
nginx ×1
php ×1
ruby ×1
webkit ×1
wordpress ×1