Tagged

css

A collection of 5 posts

css

CSS 实现元素较宽不能被完全展示时将其隐藏

遇到一个需求,需要实现的样式是固定宽度的容器里一排显示若干个标签,数量不定,每个标签的长度也不定。当到了某个标签不能被完全展示下时则不显示。大致效果如下,标签只显示一排,多了放不下了就不显示了。 标签部分 DOM 结构如下 <div class="labels"> <span class="label">Cooking</span> <span class="label">Coding</span> <span class="label">Travel</span&

js

从css3和canvas的旋转说起

之前遇到的一个老问题啦,突然发现又傻傻分不清楚啦。。。来总结一下吧,哈哈。先来说一下,为什么要把这两者放在一起说,先上需求:如何把反着的一张图片弄正,并输出出来呢?也就是我们的目标如图: 这个需求来源于,手机照相机照出的图片其实存起来的时候对于程序显示来说不都是正的,我们自己在手机上浏览看起来是正的是因为手机的程序帮我们搞定啦,可是当我们拿到手机原始图片的时候想展示的时候发现,矣?怎么有的反着的,其实照相机照相的时候会留下照片的方向信息,根据这些方向信息我们就可以把照片调正过来,然后再存到服务器或者展示出来,关于照片里的方向信息大家可以去参考EXIF.js这个库,我总结的信息如下:(EXIF信息有1 8 3 6) 1: 正向 8: 需要逆时针旋转90 3: 需要旋转180度 6: 需要顺时针旋转90 好了,有了这些信息我们来看看怎么去做呢? 比如有张图是需要旋转90度才能扶正的,那写css3的rotate的不就行了么?是啊,我最初也是这种感觉,可是这样有诸多限制,比如,如果你想把图片存在服务端,下次别人用的时候图片就是正的了,就不用再做特殊处理了啊,那得图像处理下,前端怎么弄呢?canvas应该可以吧!本以为可以像css3那样两行搞定: transform:

H5页面 - 小米 Max 微信群聊
h5

H5页面 - 小米 Max 微信群聊

开始 上半年小米Max发布的时候,做了一个在朋友圈传播的模仿微信的群聊界面H5页面:一群公司的大咖在群里聊小米Max,用户可以向大咖们提问,以此了解产品。 页面的主体是群聊对话,同时在对话中包含了很多交互:图片、视频、动画、翻译等。如果用户是用微信打开的链接,还会获取用户名和头像,作为页面里的“我”来聊天,效果有点逼真~ 页面里有“彩蛋”,还能求红包喔~ 不啰嗦,先看页面效果。页面地址(手机浏览效果更好)。微信里访问这个链接 原页面对话和交互都很多,我择出了主要逻辑和交互放在codepen上,供有兴趣的同学参考~ 同时简单分析了自己的想法和思路,也算是一个总结~ Codepen 链接 整体布局 整体布局还是很简单的:一个可以滚动的div,承载所有对话;一个固定在底部的“输入框”,包含所有选项。 人物 & 对话数据 群聊里的所有人物都保存在 js 对象 _members 里,包含人物的 id、

vertical-align

css 实现竖直居中的 N 种场景及 N 种方法

刚开始工作的时候,css 里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜,搜,搜,半天才搜到合适的解决方法。然后下次遇到,呃,又忘了~ 后来仔细回忆了一下,其实CSS实现竖直居中是有几种不同的应用场景的,需要分别使用不同的解决方法。这也是为啥每次都觉得,诶上次那个解决方法好像不行呢?(原来并不是我智商的问题)好了废话不多说,记录下遇到的不同场景及解决方法,希望能对自己或者别人有所帮助。 ### inline 或者 inline-* 的元素竖直居中 可以借助 `padding`, `line-height`, `vertical-align` 等属性。有如下两种具体情景: 1. 单行竖直居中,如单行文本或者链接 这种情况,通过给元素上下添加相同大小的 padding 值即可实现竖直居中。 See the Pen RapmvY by Yawen DENG (@Simona_Deng) on CodePen. 如果~~老娘就不想使用 padding

css

图片不失真自适应水平垂直居中

想到了一个问题 今天在浏览网页的时候看到一种布局突然就想它是怎么实现的呢,看来下发现不是css实现的,是用js实现的觉得如果没有js帮忙呢,就尝试用css看看能不能实现,发现自己基础真的要好好补下了。。哈哈,anyway,需求如下: 图片在屏幕上方块中水平垂直居中 图片宽度和高度都是不确定的 图片宽度和高度自适应其容器,宽度和高度随着容器变化而变化,这时需保证宽高比不变即图片不被拉长或压缩;还需保证宽度和高度都不能超过原始值的大小,这样图片不会失真 尝试实现一下 常见的未知高度的垂直居中的方法选一种就好了。而不失真自适应的原理就是利用我不太常用的max-width: 100%; max-height=100%; 来保证第三条的实现。如果图片的实际宽或高超过了其容器,因为有上面max的限制,浏览器就会按照其容器的宽或高来限制其超出容器。因为图片高度和宽度都没有设为固定值,则他们的比例一直保持着。如果图片的实际宽或高没有超过其容器,则按原始大小呈现,即便容器再变大图片也不会受影响,自然不会变大失真了。有点儿绕。。。表达能力真作急。。。 代码如下: <div class="block"> <div class="pic-wrapper"> <