2018年01月25日(木)

CSSだけで、長いテキストを一部隠してボタンクリックで全文表示

• 0
• 21
• 23
• 82

Result

See the Pen SlideToogle con CSS :checked by kachibito (@kachibito) on CodePen.

たまに見かけるコンテンツの表示/非表示のトグルです

css

.expand {/*全体*/ width: 300px; padding:15px 10px; max-height: 80px; overflow: hidden; position: relative; border-bottom: 1px solid #aaa; transition: .5s; } .expand::before {/*グラデーション部分*/ content: ""; position: absolute; width: 100%; height: 50%; bottom: 0; background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff); pointer-events: none; transition: 1s; } .contenedor i...