default
menu home
Icon library Sign up Login favorite_border message help_outline

- Online notes-page6

styleTags:  All CSS html javascript php/other IT
Demo subject 几种CSS字体描边和阴影效果

基本方法:
1、-weblit-text-strok:字体描边,非标准方法,浏览器兼容性存在一些问题。好处是这种方法不扩展字体本身,属于在字体内部描出边界,所以字体完全不走样。
2、text-shadow:字体阴影,符合标准规范,现代浏览器普遍支持。重点:可以用重复多次不同偏移量阴影来实现描边效果。但是假如用这种方法来做纯包围式描边(不模糊blur)的话,效果不完美,如果描边宽度比较大的话,斜边的尖角部分会出现“锯齿、缺角”等。

语法:{text-shadow: h-shadow v-shadow blur color;}
4个参数分别表示:水平偏移、垂直偏移、模糊(扩散)、描边的颜色。

我们可以根据实际需要选择,效果如下图:
[img]

by: fanshome  visibility 2912
2023-05-29 14:57 (UTC)

subject 网络收藏夹网站开发过程中PHP正则表达式忘记使用非贪婪模式带来的一次教训

新版favinavi人性化网络收藏夹网站建设初期,还没有开始宣传,就发现访问量开始8小时内达到了大几千,有点喜出望外。可是再看看又发现不对,统计的关键页面的访问量少的可怜,那么访问量都是哪儿来的呢?

没办法,只能老老实实添加详细统计代码来企图发现问题。果然,详细分析后发现了2个重大问题:

1、异常流量主要来自垃圾蜘蛛爬网;
2、异常流量集中在登录页面“https://favinavi.com/login?o=xxx”。

这就奇了怪了,一个登录页面你个蜘蛛要重复爬几千次是几个意思?!

再仔细分析,发现其实每次垃圾蜘蛛访问的url其实不完全相同,参数o后面的内容非常花样繁多,不属于正常情况下应该出现的。

这里解释一下,参数o是为了记录用户登陆前所在页面,万一用户要干点什么的时候却登录超时了的话,一旦登录成功可以立即跳转到登录前的页面,这样做完全是为了用户能有更良好的体验。问题到底出在哪里呢?

最终分析发现,问题出在提取文件名的正则表达式上。

php代码:
$fn=preg_replace("/^(.*)\?.*$/","$1",$_SERVER['REQUEST_URI']);

其本意是想记录用户登录超时前所访问的页面,去掉问号后面不必要的参数,得到一个“纯净”的文件名,初看其实好像也没啥问题。但其实这个正则表达式是有个大问题的。因为登录前所访问页面的参数中是可能包含参数的,说得有点绕,就是uri中问号后面可能还有问号。虽然经过了urlencode,但问号本质上还是问号。那么问题就来了,上面的正则没有使用非贪婪匹配,就会匹配到最后一个问号,前面的$fn就会变成一个已经带了参数的乱七八糟的文件名,由于网站有多个地方需要处理这个纯净$fn,最后再加上原有的访问参数提交。不光是php,还有JavaScript参与,所以最后的结果是login后面的参数越变越多,越来越长,并且绕不出来。爬虫又不是人,会折腾几次发现不对就放弃,它不断地爬啊爬,每次都当成是爬到了一个新的链接,所以就继续爬喽...

这个bug解决起来其实很简单,把正则表达式括号里的内容改成非贪婪模式就对了:
$fn=preg_replace("/^(.*?)\?.*$/","$1",$_SERVER['REQUEST_URI']);

星号后面再跟一个问号,就成了非贪婪匹配,只留下第一个问号前面的内容,就是我想要的“纯净”的文件名了。

by: fanshome  visibility 1579
2023-06-09 13:43 (UTC)

subject Apache2网站安装开通https协议SSL证书

比较简单实用的一种做法是使用certbot,签发证书、安装、配置web服务器(apache/nginx等)、自动更新一条龙。详细介绍请访问cerbot官网:https://certbot.eff.org/

这里简单介绍主要步骤:(以Ubuntu linux server为例)

先安装snapd
sudo apt install snapd

确保安装的是最新版本内核
sudo snap install core; sudo snap refresh core;

使用snapd安装certbot
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

最后,运行cerbot并自动配置apache运行https
sudo certbot --apache

其中,certbot会要求输入域名、email等信息,基本上照做就行。

成功后cerbot会返回如下信息
Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/favinavi.com/fullchain.pem
Key is saved at: /etc/letsencrypt/live/favinavi.com/privkey.pem
This certificate expires on 2023-06-26.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

包含证书和密钥文件保存路径,证书过期日期等,并且告诉您可以让certbot在后台自动更新证书。

by: fanshome  visibility 1517
2023-05-21 07:24 (UTC)

Demo subject CSS3特效“喜欢/Like”动态按钮,一颗会跳动的心脏

纯css+svg实现,鼠标移上去心脏会有节律地跳动,适合用来做点赞按钮参考,或者学习css动画技巧。

by: fanshome  visibility 1549
2023-05-21 12:19 (UTC)

Demo subject CSS3+SVG实现的带音效、会抖动的小铃铛图标特效

非常真实的抖动效果,鼠标移上去还有叮当声哦...

点“演示”按钮体验一下。

by: fanshome  visibility 2396
2023-05-25 08:52 (UTC)

Demo subject 一个纯CSS的最小干扰的渐变色彩虹loading bar

Loading图标,又称“加载中”图标,以往是用gif格式动图来实现。但是gif有一个比较明显的问题,不易调整大小,然后图片一般比较粗糙,颗粒感严重。

现在流行纯css的loading效果,比如不断转圈式、不断跳动式,网上有很多。这里不多做介绍,搜索一下会有很多。

给大家介绍一款动态横条式彩虹loading效果,类似谷歌风格,又超越谷歌的单一颜色Loading Bar,既充分利用了容器顶部的“无用”空间,又不失醒目,用户体验比较好,干扰的感觉最小,同时又感觉酷炫、美观。点击本页红色的“演示”按钮看看吧。

css代码参考自:https://codepen.io/lister/pen/mdrrYJQ

这不是进度条,进度条一般是逐渐填满的形式,有另外的实现方式。

by: fanshome  visibility 1832
2023-05-20 08:35 (UTC)

Demo subject CSS3 一款漂亮的带渐变背景和关闭按钮的卡片头样式

使用css: linear-gradient来实现线性颜色渐变背景,效果见下图:
[img]

点击“演示”按钮可以查看效果。

by: fanshome  visibility 1512
2023-05-20 13:50 (UTC)

Demo subject HTML5时代,使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法

在很久很久以前,没有智能手机的时代,写网站只要考虑PC显示屏幕,基本上任何页面元素都只要固定的宽度和高度,比较好处理。

为了提高页面的加载速度,讲究点的方法是:
假如某个页面有多个小图片(比如二十个小图标)需要显示,可以把这二十个小图片合并到一张大图,然后通过背景图片切片的方法(background-position:)来显示不同的小图片,从而极大地提高页面加载速度。

当今时代,适配大大小小各类屏幕成了某种必需,最好能适配超过分辨率的pc大屏幕、普通笔记本电脑、pad、手机等等。虽然网速比从前提高了很多,但是,尽量减少网页图片使用数量依然是提高网页加载速度的必要手段。

有些时候,我们需要为同一类型、同样大小的链接配上不同的图片,此时,假如能够只使用一张图片来解决问题就更好了。例如,某些场合要用户选择不同的浏览器来进行下一步,假设用到以下这一张图片中的5种浏览器:

[img]

需求是:图片能自动适配不同屏幕宽度,使用背景图片方式来分割出5个链接,缩放窗口大小时,图片自动跟着缩放,同时宽高比不变,即保持图片不变形;与此同时,对应的5个链接也要随着背景图片的缩放而同比例缩放。

那么要怎么实现呢?请看以下CSS代码,任何用到宽度、高度的地方都使用百分比,保证缩放比例不变形。

by: fanshome  visibility 1662
2023-06-03 06:09 (UTC)

Demo subject css实现图标或图片等元素镜像翻转(水平镜像、垂直镜像)

有时候会发现现成的图标很美观,但是和一般习惯不同(或者纯粹不符合个人喜好),比如“分享”图标,一般是一个箭头,但是箭头方向感觉和习惯的相反,这时就需要来个水平镜像。
与其化精力重新画图或寻找合适的图标都太麻烦,不如用css的transform来实现镜像。
正好favinavi的logo非常适合来说明镜像效果,请点击“演示”按钮查看效果。
favinavi.com的logo: [img]

by: fanshome  visibility 2968
2023-05-25 17:06 (UTC)