作者：matrix
发布时间：2022-10-18
分类：零零星星
环境：
Mac + vscode + docker
创建项目和容器镜像
基于nodejs的docker镜像安装tailwindcss，daisyui
新建目录tailwind-project
$ mkdir -p ./tailwind-project/src/ ./tailwind-project/dist/
$ cd ./tailwind-project/
$ docker run -it --rm -v $(pwd):/data -w /data node:latest sh -c 'npm install -D tailwindcss tailwindcss-cli ;npm i daisyui;npx tailwindcss-cli init;bash'
install -D 参数表示dev
daisyUI为组件库 可取消
显示「Created Tailwind css config file: tailwind.config.js」 即创建成功
安装成功的npm包：
root@4e27e6ae691b:/data# npm list
data@ /data
+-- daisyui@2.31.0
+-- tailwindcss-cli@0.1.2
`-- tailwindcss@3.1.8
配置tailwind.config.js
找到tailwind-project目录的tailwind.config.js文件。
参考配置如下：
// 下面配置为tailwindcss 3.0+版本
// 旧版本配置参数名可能不同
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [
require("daisyui"),
],
daisyui: {
themes: ["emerald"],
},
}
content：待监听的html/js/vue文件路径（Tailwind会自动读取使用的class，输出到output css）
plugins：配置加载UI插件daisyui
daisyui.themes : 设置daisyui的默认主题为emerald
热更新监听
使用tailwindcss命令监听html文件变更，自动输出class的css代码到output.css
npx tailwindcss -o ./dist/output.css --minify --watch
-o参数定义output css输出文件路径
--minify参数启用css压缩
--watch参数启用热加载更新文件
编辑你的html
编辑./src/index.html文件，开始尝试tailwind啦...
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HHTjim'S 部落格 - tailwind Demo</title>
<!-- 引入tailwind输出的css文件-->
<link href="/dist/output.css" rel="stylesheet">
</head>
<!-- tailwind watch监听class变化自动更新到output css -->
<body class="bg-[#8ed1fc] h-screen">
<div class="container flex items-center flex-col w-full">
<h2 class="text-4xl text-center my-5 font-bold " >Test Title</h2>
<button class="bg-green-300 hover:bg-green-500 rounded px-2 py-2">Button</button>
</div>
</body>
</html>
vscode插件
tailwindcss官方提供了vscode的开发插件，便于提示class name
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
tailwindcss用法要多多参考官方手册了，不过有daisyui也可以更快的输出你想要的控件样式
参考：
https://tailwindcss.com/docs/installation
https://daisyui.com/
https://github.com/komavideo/LearnTailwindCSS/tree/main/Lesson02
作者：matrix
发布时间：2014-02-06
分类：Wordpress
多次看到多说评论的头像样式，鼠标悬停的时候360度旋转~
css：
#ds-avatar{
width:54px;height:54px; /*设置图像的长和宽*/
border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:27px;
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/
-moz-transition: -moz-transform 0.4s ease-out;
}
#ds-avatar:hover{/*设置鼠标悬浮在头像时的css样式*/
box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
transform: rotateZ(360deg);/*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
说明：#ds-avatar为头像图片的样式ID。
来自：http://ifoouucode.duapp.com/37
作者：matrix
发布时间：2013-10-16
分类：Wordpress 兼容并蓄 零零星星
看到易迅网的右侧、下方商品都有的一种效果，原本以为是JS什么的，找了大半天才知道是css3的效果。
DEMO下载:
http://www.400gb.com/file/28915416
http://pan.baidu.com/share/link?shareid=3180343884&uk=3238236832
关键的css代码：
@-webkit-keyframes aniBlink{from{left:-60px}to{left:550px}}/*aniBlink动画执行区域*/
.TU a:before{content:'';position:absolute;width:30px;height:200px;/*aniBlink动画斜线宽度和高度*/
top:0;left:-60px;/*aniBlink动画斜线初始停留位置*/
overflow:hidden;
background:-webkit-gradient(linear,left top,rightright top,color-stop(0%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.4)),color-stop(100%,rgba(255,255,255,0)));
/*linear（线性渐变）*/
-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}/*skewX：定义一个X轴的2D 倾斜*/
.TU :hover a:before{-webkit-animation:aniBlink 0.3s ease-out forwards} /*aniBlink动画执行的时间0.3s*/
说明：.TU为包含图片class（任意命名）的外面一层class（命名为.TU）。
例如：
<div class="TU">
<div class="y">
<a href="https://www.hhtjim.com" target="_blank" title="易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画 - HHTjim.Com" >
<img src="https://static.hhtjim.com/wp-content/uploads/2015/bcsfile/20130326192035.jpg" width="505" height="134"></a>
</div></div>
aniBlink为动画名称。如要修改，确保第一和第九行相同。
空间坐标系是以窗口右上角为原点，从左到右为X轴正方向，从上到下为Y轴正方向，垂直屏幕向外为Z轴正方向进行建系。
基本上都注释了。还有其他不知道的可参考度娘。
效果，就那中间的白条东跑西跑的：chrome、safari、firefox都看到效果，IE10不行！其余须自测。
参考：
http://www.w3cplus.com/content/css3-gradient
http://www.mxria.com/css3/c20120121810.htm
CSS3效果在线编辑工具
作者：matrix
发布时间：2013-10-13
分类：Wordpress 零零星星
测试是用于NGRO主题的首页文章列表上，配合起之前的窗口小列表 不错~
带8px白色边框鼠标停留后还有放大效果，如图：
.Indexpost img {
padding: 8px;
background-color: #FFF;
box-shadow: 0px 0px 18px rgba(0,0,0,.4);
-webkit-transition: all ease .3s;
transition: all ease .3s
}
.Indexpost img {
margin-right: 10px;
width:140px;
height:100px;
overflow:hidden;
float: left;
}
.Indexpost img:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
box-shadow: 0px 0px 18px rgba(0,0,0,.5);
}
说明：这是笔者自己主题的css代码。
6行.3s为放大过程的时间0.3秒
17行1.05为放大的值。
其他的参数我也不清楚，不管谦虚还是其他的来说我很菜。
我这原本首页样式是post的，改成.Indexpost样式也为了独立修改的方便。大致样式跟.post一样，只是修改了.Indexpost img。
如果你也感觉到此效果不错，不嫌弃的话可以参考我这的css代码。
建议参考：图片呼吸灯，CSS3图片阴影+鼠标移上放大图片
作者：matrix
发布时间：2013-09-26
分类：Wordpress 兼容并蓄
鼠标停留在有title属性上的时候或有提示，但是默认的样式中有觉得不可观的地方。利用js即可实现修改。
NGRO的效果演示：
css 阅读剩余部分 »
作者：matrix
发布时间：2013-09-25
分类：Wordpress 兼容并蓄
更换主题-七彩之家BLUE2.0以及后续的修改 有提到整合auto-highslide灯箱的功能，这次更加完善。
DEMO：http://pan.baidu.com/share/link?shareid=4020387527&uk=3238236832
步骤：
1.将下面代码加到主题的functions.php中，方法你懂得。
<?php
//////////////START wp highslide picture code /////////////
add_filter('the_content', 'hlHighSlide_replace', '99');
add_action('wp_head', 'highslide_head');
function highslide_head()
{
$hlHighslide_wp_url=get_bloginfo('template_url').'/';
$defaults_javascript =
"<link href='{$hlHighslide_wp_url}highslide/highslide.css' rel='stylesheet' type='text/css' />";
echo $defaults_javascript;
}
add_action('wp_footer', 'highslide_footer');
function highslide_footer()
{
$hlHighslide_wp_url=get_bloginfo('template_url').'/';
$defaults_javascript =
"\n\t<script type='text/javascript' src='{$hlHighslide_wp_url}highslide/highslide.js'></script>
<script type='text/javascript'>
hs.graphicsDir = '{$hlHighslide_wp_url}highslide/graphics/';
hs.showCredits = false;
hs.creditsPosition = 'bottom left';
hs.outlineType = 'custom';
hs.dimmingOpacity = 0.3;
hs.fadeInOut = true;
hs.align = 'center';
hs.captionEval = 'this.thumb.alt';
// Add the slideshow controller
hs.addSlideshow({
slideshowGroup: 'group1',
interval: 5000,
repeat: true,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 0.75,
position: 'bottom center',
offsetX: 0,
offsetY: -10,
hideOnMouseOut: true
}
});
// Chinese simplified language strings
hs.lang = {
cssDirection: 'ltr',
loadingText: '载入中...',
loadingTitle: '正在载入，点击取消',
focusTitle: '置于最前',
fullExpandTitle: '原始尺寸',
previousText: '上一张',
nextText: '下一张',
moveText: '移动',
closeText: '关闭',
closeTitle: '关闭 (退出键)',
resizeTitle: '调整尺寸',
playText: '播放',
playTitle: '播放幻灯片 (空格键)',
pauseText: '暂停',
pauseTitle: '暂停幻灯片 (空格键)',
previousTitle: '上一张 (左方向键)',
nextTitle: '下一张 (右方向键)',
moveTitle: '移动',
fullExpandText: '完整尺寸',
number: 'Image %1 of %2',
restoreTitle: '单击关闭图片,单击不放可拖动。使用方向键切换图片。'
};
// gallery config object
var config1 = {
slideshowGroup: 'group1',
numberPosition: 'caption',
transitions: ['expand', 'crossfade']
};
</script>";
echo $defaults_javascript;
}
//add onclick event
function add_onclick_replace ($content)
{
$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '<a$1href=$2$3.$4$5 class="highslide" onclick="return hs.expand(this, config1 )" $6>$7 </a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
function hlHighSlide_replace($content)
{
global $post;
$defaults = array();
$defaults['quicktags'] = 'y';
$defaults['alt'] = 'Enter ALT Tag Description';
$defaults['title'] = 'Enter Caption Text';
$defaults['thumbid'] = 'thumb1';
$defaults['show_caption'] = 'y';
$defaults['show_close'] = 'y';
$content=add_onclick_replace($content);
$HSVars = array("SRC", "ALT", "TITLE", "WIDTH", "HEIGHT","THUMBID");
$HSVals = array($defaults['href'], $defaults['src'], $defaults['alt'], $defaults['title'], $defaults['thumbid']);
preg_match_all ('!<img([^>]*)[ ]*[/]{1}>!i', $content, $matches);
$HSStrings = $matches[0];
$HSAttributes = $matches[1];
for ($i = 0; $i < count($HSAttributes); $i++)
{ preg_match_all('!(src|alt|title|width|height|class)="([^"]*)"!i',$HSAttributes[$i],$matches);
$HSSetVars = $HSSetVals = array();
for ($j = 0; $j < count($matches[1]); $j++)
{ $HSSetVars[$j] = strtoupper($matches[1][$j]);
$HSSetVals[$j] = $matches[2][$j];}
}
$HSClose = <<<EOT
<a href="#" onclick="hs.close(this);return false;" class="highslide-close" title="关闭">Close</a>
EOT;
$HSCaption = <<<EOT
<div class='highslide-caption' id='caption-for-%THUMBID%'>
{$HSPrvNextLinks}
{$HSClose}
<div style="clear:both">%TITLE%</div>
</div>
EOT;
$HSCode = <<<EOT
<img id="%THUMBID%" src="%SRC%" alt="%ALT%" title="%TITLE%" width="%WIDTH%" height="%HEIGHT%" />{$HSCaption}
EOT;
$content = str_replace($HSStrings[$i], $HSCode, $content);
return $content;
}
/////////////////
?>
说明：87 行的onclick="return hs.expand(this, config1 )"开启了相册幻灯片功能，如果需要关闭可改为onclick="return hs.expand(this)"
2.下载素材文件，解压到主题目录
下载：
http://www.400gb.com/file/30266321
http://pan.baidu.com/share/link?shareid=3945557249&uk=3238236832
3.最后完工。
效果：
使用的Highslide JS 在线编辑，状态保存：
http://highslide.com/editor/?config=%7B%22lang%22%3A+%22zh-s%22,+%22preset%22%3A+%22html-white%22,+%22applyDimming%22%3A+true,+%22dimmingOpacity%22%3A+%220.3%22,+%22hideThumbOnExpand%22%3A+false,+%22alignment%22%3A+%22center%22,+%22captionSource%22%3A+%22thumb.alt%22,+%22captionStyles%22%3A+%22%5Ctpadding%3A+2px;%22,+%22headingSource%22%3A+%22thumb.alt%22,+%22creditsPosition%22%3A+%22bottom+left%22,+%22enableGallery%22%3A+true,+%22numberPosition%22%3A+%22caption%22,+%22enableThumbstrip%22%3A+false,+%22thumbstripMode%22%3A+%22float%22,+%22thumbstripPosition%22%3A+%22below%22,+%22thumbstripRelativeTo%22%3A+%22image%22,+%22thumbstripSize%22%3A+%22280%22,+%22slideshowRepeat%22%3A+true,+%22htmlControlsLayout%22%3A+%22icon-text%22,+%22useTitleBar%22%3A+false,+%22htmlHeadingSource%22%3A+%22a.title%22%7D
参考：http://themeidea.com/highslide.html
Highslide js 在线编辑 http://justcoding.iteye.com/blog/595145
http://highslide.com/editor/
作者：matrix
发布时间：2013-09-21
分类：Wordpress 零零星星
NGRO主题没有导航菜单，也就只有自己动手了。
最终样式，感觉还不错：
步骤： 阅读剩余部分 »
作者：matrix
发布时间：2013-09-13
分类：Wordpress 兼容并蓄
这里所谓的带像素点的颗粒效果如图,
远观效果（点击扩大）：
放大后：
阅读剩余部分 »
- 1
- 2
