小编Ric*_*ape的帖子

显示屏上的转换:属性

我目前正在设计一种CSS'mega dropdown'菜单 - 基本上是一个普通的CSS-only下拉菜单,但包含不同类型的内容.

目前,似乎CSS3过渡不适用于"display"属性,即你不能做任何类型的过渡display: nonedisplay: block(或任意组合).

当有人将鼠标悬停在其中一个顶级菜单项上时,是否有人会想到上述示例中的第二层菜单可以"淡入"?

我知道你可以在visibility:属性上使用转换,但我想不出有效利用它的方法.

我也尝试过使用身高,但这只是失败了.

我也知道使用JavaScript实现这一点是微不足道的,但是我想挑战自己只使用CSS而且我认为我有点短.

所有和任何建议最受欢迎.

css css-transitions

1322
推荐指数
24
解决办法
137万
查看次数

CSS3渐变,用于从Illustrator重现边界半径的"内部发光"效果

我正在努力绕过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)

基本上,太可怕了.感激地接受任何提示或提示,并提前感谢他们!

css gradient radial-gradients css3

16
推荐指数
1
解决办法
4万
查看次数

nginx try_files,proxy_pass和upstream

我正在为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)

php wordpress nginx

8
推荐指数
1
解决办法
2万
查看次数

CSS3 Gradients和border-radius导致webkit中的无关背景

在关于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并且景观不断变化时,我可能只需要"混乱"它并恢复为图像.

但是,如果有人能提出替代方案,我将非常感激!

css webkit

5
推荐指数
1
解决办法
7048
查看次数

部署前运行任务:symlink:shared capistrano 3

我是卡皮斯特拉诺(第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"'

有没有办法在'当前'符号链接指向它之前确定这个新版本目录?非常感谢你提前.

ruby deployment capistrano capistrano3

5
推荐指数
1
解决办法
1031
查看次数